Så funkar FitText och Responsive text

Responsive design har ju alla förhoppningsvis hört talas om men responsive text är inte lika omtalat. Krasst kan man säga att beskrivningen av responsive text är för tillfället väldigt luddig. Är det text som växer och krymper i storlek eller är det textstycken som försvinner beroende på skärmens storlek? Hur som haver så lever båda lösningarna idag även om de fortfarande befinner sig i sin linda.

Responsive text

Lösningen responsive text av Frankie Roberto bygger på att skala bort stycken i en text beroende på skärmupplösning. Detta åstadkommer han med enklare HTML-klasser och CSS-magi. Personligen tycker jag att detta är en riktigt trevlig funktion, dock så finns det allmänna haters som undrar om vitsen med denna funktion. Vitsen som jag ser det är att vi har olika beteenden på olika enheter, att läsa genom en lång text i telefonen är inget at föredra. Jag vill ha kort och koncis fakta. Sitter jag däremot framför en skärm så är förutsättningarna annorlunda.

Självklart dyker det upp lite nya utmaningar med detta, som t.ex. att skribenterna måste tänka på hur texten skalas ner för att det inte skall bli konstigt i mindre upplösningar.

responsive-text-L

Fullskalig text

responsive-text-S

Nedskalad text

FitText

FitText är en lösning framtagen av Dave Rupert som skalar texten ifråga med hjälp av lite javascript. Den anpassar storleken på texten/fonten beroende på webbläsarens storlek. Lösningen bör endast användas på större rubriker och inte på brödtext då texten blir oläsbar på t.ex. små skärmar. Enkel att implementara och rolig att leka med.

FitText

Svår att visa. Gå till sidan istället.

Självklart går denna jQuery-lösning att ladda ned på GitHub.

Related Posts Plugin for WordPress, Blogger...