Developer Exchange: Elastic font sizes

• What are elastic font sizes?
• Why do we need elastic font sizes?
• Where do I use elastic font sizes?
• In the field
• Should I change it now?
• About Figma / Sketch
• Funfacts

What are elastic font sizes?

• Elastic font sizes are not "absolute" like "px"
• Elastic font sizes are relativ to something
• There are 2 css units right now which are commonly used: EM and REM
• EM is relativ to its parent element font size
• REM is relativ to the root element, e.g. the HTML element

Where do I use elastic font sizes?

• For the font-size attribute of course
• Icons
• Logos, especially if the logo has letters
• In some cases for spacings like margin and paddings as well
• In an ideal world: REM and absolute units like PX should coexist in a project

Why do we need elastic font sizes?

• It is an accessbility feature
• Some people have a low vison disablity
• Some people work with small screens, e.g. small desktop screens
• Interacting with user interfaces makes it harder for them
• Zooming into web application increases Fontsize but user interface as well
• Thus zooming has its limits and could break user interface / confuse the user

In the field: Examples from german bürgerservices

Webpages of citizen services are somewhat required to make their services accessible. Here are some examples:

Negative examples

• Walldorf
• Halle
• Albstadt
• Reichling
• Worms
• Potsdam
• Dransfeld

Positive examples

• Lübeck
• Berlin
• Sachen Anhalt

In the field: Examples from different component libraries

It is also interesting to check out which approaches some component library teams went in the end:

Positive examples

• MUI Button
• Bootsrap Button

Negative examples

• Vuetify

In the field: An Hella gutmann exampe

macs365 got a new homepage!

Should I change it now?

• Short answer no.
• Depends in one hand if you want to support this accessbility and if your setup / component library supports it
• For the time being it is good to be aware of this accessbility feature
• Something we certainly want to integrate in Reusable Frontend components :)

caniuse

About Figma / Sketch

• Figma and Sketch are not able to use / display relative and elastic units
• Rule of thumb: Dont take the values presented in Figma / Sketch 1:1
• Talk to your UX/UI guy or check out the styleguide

Funfacts

• Windows 95 and all other old Operating Systems from the Era tried to tackle the issue about font sizes and accessbility as well. An example can be found on this document on page 14.
• Aleksandr Hovhannisyan wrote an awesome article about rems for font size. Check it out if you want to learn more about this CSS unit.
• I created a storybook addon recently! A plugin which lets you change the root font size!

Thank you!

elastic-font-sizes.netlify.app

Github