denkwerk TechTalk
Fluid Typography – How we optimize fonts for all screen sizes
Is it possible to display fonts optimally on any screen size? Until now, this was difficult with CSS. But thanks to CSS math functions and the new container-query-unit, so-called fluid typography is no longer a problem. We explain how it works.
Modern websites need to be responsive in order to look their best on as many devices as possible. However, with the ability to adapt to different screen sizes comes another problem: the text it contains must also be easy to read on all screen sizes. During their tech talk, the two denkwerk web developers Tobias Sindek and Arco Mul demonstrated ways of achieving optimum results with the typography of a website: So-called fluid typography helps in many cases to optimize a website much more easily for all screen sizes.
Fonts reach their limits with viewports
The classic way to adapt text for responsive websites is via breakpoints with media queries. Fluid Typography's first approach is to use the viewport, i.e. the width of the screen in pixels. Web developers can still work well with the viewport width unit, in which different screen widths and corresponding font sizes are defined: If the screen or browser window becomes larger or smaller, the font switches to a different size from a certain point. However, this only works on simply designed websites and quickly reaches its limits with nested elements and the multitude of current devices and screen sizes. Because there is no longer just desktop, tablet and mobile.
Create better products: Fluid Typography helps with multidimensional websites
"The iPhone alone has three display types: browser, in-app browser and preview," explains Tobias. The developer points out that this results in a large number of different viewport sizes: From the tiny smartwatch display to the variety of smartphone and tablet sizes to full-screen desktop monitors, there is basically nothing that doesn't exist anymore. There are also extras such as light and dark mode.
"We have viewports and multidimensional websites. It's not a clear-cut thing with four or five breakpoints that we have to look at. No: a lot is changing - and Fluid Typography can help to create a better product."
Scott Kellum has done research in the field of fluid typography and even patented it, on the basis of which he founded his service Typetura. Kellum tackled the difficulties caused by the countless screen sizes in web development and came to the conclusion that the optimal viewport does not exist.
Where is the best place to avoid CSS unit viewport width?
Tobias showed that the viewport approach does not always work: The CSS unit viewport width, for example, can be made more flexible using the clamp function. This allows websites to be easily adapted to intermediate sizes. However, this can cause problems with accessibility tools such as a screen magnifier. And even more complex layouts quickly become complex on the code side, as additional CSS rules have to be created. Layouts like in a newspaper, in which the elements are always consistent within themselves and in relation to each other, are difficult to achieve in this way.
Examples: Fluid Typography
Container-Query
h2 {
font-size: clamp(1.2rem, 4cqi + 1.2rem, 3.157)
}
h3 {
font-size: clamp(1rem, 4cqi + 1rem, 2.369)
}
Viewport
h1 {
font-size: clamp(1rem, 4vw + 1rem, 3.157)
}
CSS animations as a workaround
Following the work of Kellum, Arco recommends the use of fluid typography with additional CSS animations: Interpolation can be used to achieve a largely optimal display of text. This means that instead of linear growth, a Bezier curve is used in which the font scales slowly in the small and large areas and quickly in the middle area.
Testing retained despite flexibility and simple CSS development
With Fluid Typography, it is possible to create websites in the layout of classic newspapers, with many different boxes that have to scale in relation to each other in order to create a harmonious image on all viewports. Arco showed an example website by Scott Kellum at codepen.io that fulfills exactly these criteria - and looks really modern and sophisticated.
Fluid Typography is "super flexible", says Arco. And indeed, the method makes CSS development easier in the multitude of possible viewports. At the same time, it can cover extreme cases - such as the Apple Watch. Developers should only pay attention to accessibility - and test their websites on as many screen sizes as possible.
In combination with a modern design system and design tokens, Fluid Typography can be used to create high-quality, homogeneous products that are easy to expand. Kellum offers suitable libraries for Fluid Typography via its Typetura service.
