We are all familiar with adjusting the font size of HTML headings when switching from desktop to mobile view. In the past I’ve done this using CSS breakpoints, or used themes that had this already set up, but there is another more modern option called fluid typography. I’ve been working with the Cwicly toolkit and decided that I wanted to explore fluid typography for my Cwicly projects.
The idea with fluid typography is that instead of setting font sizes using break points, you use some modern CSS features so that the font size scales depending on the user’s viewport. At larger sizes the font is larger and at smaller sizes it is smaller, automatically. You accomplish this using the “clamp” function. With “clamp” you set minimum and maximum font sizes and the font size adjusts between those two settings.
If you are using Cwicly, there is some good news, Cwicly has fluid typography options built in. There are still some things to keep in mind, but I hope that this simple walk-through will be enough for you to get started.
Background Information and Resources
This post isn’t going deep into the technical side of fluid typography. There are literally hundreds of guides online about how to set up fluid typography, how to do the math for scaling, and discussions of things to keep in mind. A good overview is this article from Smashing Magazine.
There are also some handy calculators that do the math for you. I like this fluid typography calculator from Aleksandr Hovhannisyan because of its flexibility.
The Mozilla Developer Network has an article on “clamp” which explains the basics of the function. Clamp takes three parameters. The first one is the lower bound, the smallest the font should get. The last or third parameter is the upper bound, the largest the font should get. In the middle is the “desired size” based on the user’s viewport width. This middle parameter is often a calculation in itself.
font-size: clamp(1rem, 10vw, 2rem);
There are two measurement units in the clamp calculation: REM and VW. “REM” stands for “Root EM”. Without going too far down the rabbit hole, EMs are a relative unit brought over from print typography. The Root EM, or REM, is the size of the font at the root of the HTML document. The root is above, or comes first as the basis of the body element. You see that in the root declaration the font size is 16px. That is a standard which you can change if you want to, but I’ve sometimes seen odd things happen when changing it at the root level, because it seems common to assume its value.
You can still have a larger font size. For example see the font size set to 18px for the “p” element for paragraphs. The “h1” heading element is set to a font-size of “2rem,” so if the root is 16 the 2rem would be 32px.
The viewport is the content area of the web browser, minus the “chrome” or things like scrollbars. The “viewport-width” unit is the horizontal width across the viewport window.
First Steps and Things to Keep in Mind
If you are experimenting with how fluid typography works then use a test or staging site. If something goes wrong you don’t want the pressure of trying to fix it while real users are visiting the site. It is best to take your time so you are happy how it looks and is working before changing the settings on a live site. Of course, if you are starting a new site and there are not visitors yet then you don’t have that issue. This is what I’ve done, I have a new Cwicly site, so I’m clear to try out the options and explore.
To get started, I go to a new page and name it “Style Kit.” In this page I add a Cwicly Section block and inside that I add a Cwicly DIV block. Inside the DIV I add a paragraph block and type the following lines into the Gutenberg editor:
This is an H1 Heading
This is an H2 Heading
This is an H3 Heading
This is an H4 Heading
This is an H5 Heading
This is an H6 Heading
This is a paragraph
This is small text
Each of those lines of text is currently a paragraph. I select the first one and click on the paragraph symbol. That gives us a list of blocks that the content can be transformed into. This is referred to as a “block transform” and is a useful Gutenberg shortcut. I go through the list and change each paragraph to the appropriate block heading type. We’ll do the small text further on.
One thing you’ll notice is that the H5 and H6 headings are actually smaller than the regular paragraph text. This is an artifact of the evolution of HTML / CSS and often browsers use these defaults as fallbacks. Also notice that the first two headings are much larger proportionally than the others. I’d like to have a smooth progression where the headings are larger than the regular text.
Before we actually start setting the font sizes, let’s go to the Cwicly global style area by clicking on the Cwicly icon in the upper right corner. Then click on the global styles and on the Settings tab. I set the breakpoint for mobile to 480px and tablet to 768px. I also set the max size of the section to 1280px.
Using the Cwicly Global Settings UI to set the Fluid Typography
Before you start, think about what you want your sizes to be. Here are the ones I picked.
h1: 38-34 h2: 36-32 h3: 34-30 h4: 32-28 h5: 30-26 h6: 28-24 font-size: 22-18 small: 18-16
Now we go to the Cwicly global styles area to the Typography panel. Starting with H1, I go through each of the header sizes and apply the settings. I give all of the headings a font weight of 800.
Then when it comes to font size, I clear out the setting there by clicking on the blue dot, which indicates a setting has been applied. Then I click on the “px” size setting in the front size box and see at the bottom of the list of measurement units an option for fluid typography.
When you click on the “fluid” option it opens the built in Cwicly fluid typography calculator.
- The root font size.
- The smaller viewport size where the lower bound font size is clamped and the upper bound one for the largest size. This is why we set the breakpoints first. In this case the font size should stop getting smaller at the mobile breakpoint and the upper viewport width is in the bounds of our largest section content area.
- These are the font sizes in pixels
- Cwicly automatically does the calculation as you type. You can see the CSS setting yourself.
- There is a copy and paste button. Cwicly knows you are going to have to set these for each heading level, so they provided these buttons to make it a bit easier.
One thing to keep in mind is that calculation that Cwicly makes only has one decimal place. I’ve seen some of the online calculators have a bunch. When I tested this process out I found that the font size on my page was very close, but the font size might have a decimal, which I think could be a result of this rounding.
I then do the Body text option the same way, but I give a font weight of 400. In the calculator I saw a warning message. Cwicly checks that the font size will meet accessibility requirements. To fix this I set the smaller font size to 19px and the warning went away.
The last thing to do now was the small text option. I click on the small text paragraph and then go in the block settings / advanced panel and give it a CSS class of “small”.
Then I go to the Cwicly global styles area and select the option to add a global class. You have to click the plus sign to add a new one. I give it a name of “small”.
Then you go into the styles option panels where I picked the typography area. I set the font weight to 400 and go into the fluid calculator.
I apply the settings and got a warning message here, so I again adjusted the font sizes a bit.
Here is the final progression / scale. On the front-end I can see when using the browser dev tools that the font size changes as the screen gets smaller or larger.
Understanding the CSS Hierarchy when using Cwicly
When working with Cwicly styles it is important to know that settings might come from a number of places and also understand which one will be applied. The last computed CSS style is the one that rules. They load in this order starting with the theme stylesheet and ending with the block styles:
The Cwicly theme has a stylesheet that is loaded from the theme’s directory. The theme is very minimal and almost all of the CSS is related to showing the comment hierarchy.
The Cwicly plugin also provides a style sheet loaded from the plugin directory. This one provides “Normalize” or style resets to reasonable defaults.
When you add global styles using the Cwicly UI then that CSS gets output inline in the header of every document. It is possible to copy that out and put it into a style sheet.
In fact, Cwicly has an option to add a global style sheet. You can add your global CSS here if you don’t want to use the user interface.
Finally, you can override the global styles by using the block’s settings UI directly.
That’s the look at setting up global typography using Cwicly. I hope you have the walk-through helpful.