This is the starting point: Why should you use fluid typography?
Traditionally designers used different art-boards for desktop, tablet and mobile. Then developers implement it with break points. At first everything was done with pixels, then relative units came to the party.
So, where is the problem? There are some… In example, I would say when the design is in between breakpoints with such a fragmentation device landscape.
If someone goes to you and tells you to do a website ‘pixel perfect’ you can send him to hell and explain what are relative units. There are several problems working with pixels:
– Means Over-ruling the font size preferences set by users. Imagine a user who has many diopters and has changed default font size, why should you change it? This goes against accessibility.
So you´d better move to rem, as it solves user presets
-What about EM? Maybe it is better for developers but can be Confusing with parents elements due to inheritance. Skilled developers use both rem and em
So maybe the gap is in the jump from design to development, as Christine Vallaure says ‘This is something most web developers are not aware of: In no UI Software, not even the amazingly advanced ones like Sketch and Figma, we are currently able to design in rem/em units as UX/UI Designer’.
She offers different solutions:
Solution 1: Design Stays in PX and Is Translated to Relative Units During Programming.
The 62,6% Trick
/* Whereby the root font size is set to 62.5% in CSS*/
/* 62.5% of the base size of 16px = 10px.*/
/* reset 10*1.6 = 16px, to make sure you do not get any 10px around */
/* 10*2.4 = 24px */
Solution 2: Use a Handoff Tool (e.g. Zeplin)
Solution 3: Define PX and REM Values in Your Stylesheets, add rem in typography Stylesheet
Format your text with search engines and accessibility in mind. Here a couple of videos:
This is another approach working with em units.
I understand now there are some Webflow designers designing directly in Webflow (not passing throuhg Figma before), as they can work with relative units.
You can always use em, vh and %, see this proposal:
Formula — go to type-scale.com. Get the right measurement framework that you will feel suit you. Golden Ratio for desktop, Perfect Fourth for mobile).
- Set your base font (see screenshot below) for 16px
- Set your h1 tag for 2.618em (Golden Ratio) or higher (use cheatsheet from type-scale.com as a reference)
- Set your h2 tag for 1.618 em (same as #2)
- Set your h3 tag for 1em
- Set your p tag for 1em
- You are set
- Use line heigh with 1em or 1.5 em, check which does better for you.
- If the font is big on the mobile, use different measurement framework (Perfect Fourth for example)
Then. When settings your h1, h2, h3 or another tags, refer to the table that you see at the type-scale.com and use em. Just play with and you will find the measurement framework that you happy with it. Now you need only play with the base font size (Body (All Pages)) on the picture.
Play with the line height with 1em or 1.5em or find what sizer fits you project best, best use EM.
This is a Codepen with Fluid modular scale headings
There´s an article on Smashing Magazine “Responsive And Fluid Typography With vh And vw Units”, they say:
‘Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which we have a practically infinite number of screen sizes to support. Yet, for some reason, it is still used far less than responsive techniques.
This might be because typography is so deeply rooted in the centuries-old history of typesetting. The concept of having “fluid” anything is often at odds with this tradition. In print, dimensions have always been fixed, but they don’t need to be on the web. That’s why I think fluid typography is a perfect match for the web. It’s a different approach for a completely different medium’.
And there is this article from Katie Polham, really interesting. She says: “Fluid typography is the idea that font-size and line-height respond smoothly to viewport size changes, as opposed to responding at specific media query breakpoints”.
See a Codepen based on Katie Polham code:
See its implementation on webflow
This is the Modern fluid typography editor
This last solution maybe too advanced for webflow, what I have seen in many class naming systems is the use of px of rem for different devices, something like these ones:
finsweet — rem (h1/h2/h3/h4/h5/h6 — p)
Tablet & Mobile 3/2.5/2/1.625/1.25/1.125/1
(Relume almost does the same)
FlowNinja — px (Jumbo = superh1 , Jumbo/h1/h2/h3/h4/h5/h6 — p)
Refokus — px (h1/h2/h3/h4/h5/h6 — p)
Some are really near to Type-scale Perfect Fourth:
(h1/h2/h3/h4/h5/h6 — p)
- Use always a style guide
- Use rem fort texts, don’t Use em Units for Font Sizes unless you are and advanced developer (You can do .body with vw and set EM for all your fonts if you want full page responsiveness for all fonts)
- You can use em for padding, margin, line-height, width and height
- Use rem Media Queries if possible
- Don’t Use em or rem For: Multi column layout widths, when an element should be strictly unscalable
- Advanced: A very important part about building in Webflow is utilizing your “Vw”, “Vh”, “%” and “Em”