Responsive Font Sizes. Als designer of front-end developer heb je er bij het ontwerpen en bouwen van websites dagelijks mee te maken: je past een lettergrootte toe die meeschaalt met de grootte van het scherm van de gebruiker. Dat schalen vindt plaats met een berekening in de browser: het verkleinen van de lettergrootte verloopt lineair met het verkleinen van de schermbreedte.

Dikke prima, zou je denken. Alleen: soms vraagt een design op mobile device of tablet toch nét om een andere grootte, kleur of dikte dan de browser voor je berekent. Omdat dat mooier is, bijvoorbeeld. Of beter leesbaar.

Tja, daar ga je dan met die berekening. En lukraak een gok doen is ook weer zo wat. Als designer zou je graag willen zien hoe het font zich aanpast naar een kleiner scherm. En hoe (en óf) dat past binnen het ontwerp. Eigenlijk wil je zélf bepalen hoe groot dat font dan zou moeten zijn. Je laat het niet graag aan het toeval van de berekening over, toch?

Wij hebben de oplossing gecreëerd: een calculator tool voor webontwerp. Deze tool maak het fontdesign bij verkleinde weergave van jouw ontwerp direct visueel én vervolgens kun je als designer optisch bepalen hoe het font eruit zou móéten zien. De bijbehorende waarden rollen zó uit de calculator, waarna je ze kunt verwerken in je ontwerp. Hoe handig!

Hoe de tool precies werkt, komt later aan bod. Maar eerst nemen we het RFS-systeem eens goed onder de loep.

Too Long To Read?
DIRECT NAAR DE TOOL

 

Responsive Font Sizes in ’t kort

Responsive Font Sizes, we zeiden ’t net al, is het toepassen van een lettergrootte die meeschaalt met de grootte van het scherm waarop de tekst bekeken wordt. Met een automatische berekening wordt een curve bepaald, waarop de grootte van de tekst zich per device aanpast. De standaardcurve van RFS is als volgt:

 

rfs breakpoints

Bron: github.com/twbs/rfs/

 

Bij het bepalen van de fontsize per schermgrootte is de desktop-breedte leidend. Heb je bijvoorbeeld een size van 50 px op desktop (de zwarte lijn), dan zorgt RFS ervoor dat het font op tablet ongeveer op 40 px uitkomt en op mobiel op ongeveer 31 px. Dit herschalen gebeurt volautomatisch: een developer hoeft geen verschillende formaten voor responsive breakpoints op te geven.

Bij Amazing maken we vooral gebruik van het Bootstrap framework . RFS zit hierin standaard ingebouwd en is met de Bootstrap variabele ‘$enable-responsive-font-sizes’ te activeren. Eenmaal geactiveerd hoeven we alleen de fontsize voor desktop te definiëren en voilà: de waardes voor tablet en mobile zijn direct geregeld. Hier zorgt de SASS mixin voor, die eventueel ook los van Bootstrap te gebruiken is.

 

Maar wat als mobiel design afwijkt?

Superhandig, dat RFS. Vooral voor de developer. Maar hoe vaak komt het niet voor dat een mobiel design afwijkt van een desktop design? Gewoon: omdat een pagina bezoeken op je mobiel net even anders gaat dan op je computer. Voor de beste user experience, vraagt een website op een kleiner scherm toch echt om een andere benadering. Die wijsheid hebben we met z’n allen in de loop der tijd wel in pacht ;).

Het is niet per definitie zo dat de fontsize, zoals berekend met RFS, daadwerkelijk de meest optimale en aantrekkelijke fontsize is voor het afwijkende mobiele ontwerp. Daarom wil de designer soms bijvoorbeeld tóch een grotere kop hebben op een kleiner scherm, ook al komt dat niet overeen met RFS. Het bepalen van de juiste grootte en de bijbehorende waarde kan vervolgens behoorlijk tijdrovend zijn, waarbij zowel de ontwerper als developer betrokken zijn. Na dat bepalen kan de developer twee dingen doen: hij maakt een uitzondering voor de specifieke kop of plek óf hij kiest ervoor om RFS volledig uit te schakelen (als veel groottes niet overeenkomen).

 

Waarom moeilijk doen als het samen kan

Hoe tof zou het zijn als een designer zélf kan inzien hoe RFS om zal gaan met de grootte die hij op desktop heeft bedacht, zonder daarvoor de developer nodig te hebben? Hoe handig zou het zijn als hij zelf direct het resultaat op zijn scherm ziet? En hoe briljant zou het zijn als de bijbehorende fontsizes zó uit de calculator komen ‘rollen’, zodat hij ze mee kan nemen in zijn ontwerp en de samenwerking tussen ontwerper en developer super smooth wordt? Noem het een efficiënte samenwerking. Noem het de langverwachte flirt tussen ‘de eentjes en de nullen’ en ‘design’. Maar eenmaal van geproefd = om!

De langverwachte flirt tussen
‘de eentjes en de nullen’ en ‘design’

 

Geef ons die tool!

Om het onszelf makkelijker te maken, ontwikkelden wij zo’n online tool met handige weergaveopties. Zodat onze designer heel easy kan spelen met fonts tijdens het ontwerpproces. En heel eerlijk: wij kunnen niet meer zonder.

Maar hé, wij zijn de beroerdste niet! Sharing is caring en daarom stellen wij onze tool ook ter beschikking voor jou! Zomaar. Gratis. Voor nop. Omdat het kan.

Hoe het werkt:

  • De designer voert het fontsize (lettergrootte) en line height (regelhoogte) van desktop in.
  • Direct is zichtbaar hoe de ingevoerde waardes zich gedragen op verschillende schermformaten.
  • Door het scherm kleiner te maken (via de inspector van de browser) wordt de calculated size (berekende RFS grootte) getoond voor dat formaat.
  • Past deze grootte binnen het mobiel design? Dan kan de designer de fontsize handhaven.
  • Komt de designer erachter dat een aangepast fontsize beter past in het ontwerp? Dan kan hij dit in zijn design verwerken en kenbaar maken aan de front-end developer.
  • Behalve het berekenen van de grootte, zijn ook de Font Family (lettertype), Font Weight (letterdikte) en Tekst Color (tekstkleur) aan te passen.
  • Het is mogelijk om de afronding van de berekening aan te passen. Standaard wordt dit afgerond op twee decimalen, maar dit kan worden uitgeschakeld.  

 

 

 

Oja: alle instellingen worden bewaard in je browser. Je kunt dus op een later moment gewoon verder gaan waar je gebleven was. Of de instellingen resetten en opnieuw of met een ander project beginnen.

Ready voor een tool die alles zóveel makkelijk gaat maken?

GA NAAR DE TOOL 

Have fun!!

 


7 februari 2020 - 13:39