What is fluid type?
Type design on the web can be separated into two categories: static and responsive.
- Static type ignores the dimensions of the screen; its characteristics are independent of it.
- Responsive type responds to the dimensions of its screen and adjusts its characteristics based off them.
Responsive type can be further categorized into adaptive and fluid.
- Adaptive type only adjusts its characteristics at certain screen dimensions, called breakpoints.
- Fluid type adjusts its characteristics in proportion to screen dimensions constantly.
Why would someone use fluid type?
Fluid type will always stay at a constant characters per line (cpl), and therefore at a constant aspect ratio. Any layout which requires a block of text to stay at the same aspect ratio (text boxes next to images, for example) without scrolling, wrapping, or truncating would require the use of fluid type.
Plus, using fluid type in a website always gets some rad street cred.
Why would someone not use fluid type?
The central goal for typesetters is readability. To that end, font size and cpl contribute the greatest. As a general rule, body text should betwixt 50-75 characters per line, and 14-16px tall.
Static text quickly drops below optimal cpl as screen width decreases, but its constant font size means that the text is always legible.
Adaptive and fluid text, by contrast, stay close to optimal cpl at most screen sizes, but their decreasing font size also means that the text quickly becomes unreadable and then illegible.
This is the key drawback of fluid type. For type set at a large size (titles, headers), this issue is not significant. For body text that is already at a small font size, this issue quickly prevents fluid type from being the most effective choice...
Want to learn how to create fluid type yourself? Click above to see the full post (with examples!) on Server Side Guy, the technical blog of fjorge.
