Working with Fluid Typography in webflow | by fernandocomet | Dec, 2021



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.

CSS Unit Cheat sheet

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.

-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*/

html {
font-size: 62.5%;
/* 62.5% of the base size of 16px = 10px.*/
body {
font-size: 1.6rem;
/* reset 10*1.6 = 16px, to make sure you do not get any 10px around */
.someClass {
font-size: 2.4rem;
/* 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

Advanced web typography — Webflow University

This is another approach working with em units.

Responsive typography 2020 — Timothy Ricks

I understand now there are some Webflow designers designing directly in Webflow (not passing throuhg Figma before), as they can work with relative units.

Wizardry is a responsive technique using EMs that scales like VW but with a max width. There is a Google Chrome extension and a cloneable site. See documentation at Wizardry

Code Approach

Formula — go to Get the right measurement framework that you will feel suit you. Golden Ratio for desktop, Perfect Fourth for mobile).

  1. Set your base font (see screenshot below) for 16px
  2. Set your h1 tag for 2.618em (Golden Ratio) or higher (use cheatsheet from as a reference)
  3. Set your h2 tag for 1.618 em (same as #2)
  4. Set your h3 tag for 1em
  5. Set your p tag for 1em
  6. You are set
  7. Use line heigh with 1em or 1.5 em, check which does better for you.
  8. 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 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

Fluid modular scale
vw — fluid responsive typography

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’.

Some Code Experiments on CodePen

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:

CSS Clamp

See its implementation on webflow

This is the Modern fluid typography editor

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)
Desktop 4/3/2.25/1.75/1.25/1.125/1
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)
Desktop 80/64/56/42/28/20/16
Tablet 70/52/40/32/24/18/16
LandscapePortrait-Mobile 48/40/32/24/20/16/14

Refokus — px (h1/h2/h3/h4/h5/h6 — p)
Desktop 80/66/36/28/24/20/16
Tablet 70/52/28/24/20/18/16
Landscape 52/40/24/20/18/16/15
Mobile 40/32/20/20/18/16/15

Some are really near to Type-scale Perfect Fourth:
(h1/h2/h3/h4/h5/h6 — p)

  • 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”

See more

Source link

Leave a reply

Please enter your comment!
Please enter your name here