2 Easy Ways to Implement Fluid Typography

2 Easy Ways to Implement Fluid Typography in Your Website. There is two favorites method to implement Fluid Typography on your website. I was a speaker on Elementor Meetup Jakarta in October 2020 talked about the CSS Unit. Now, I'm going to share with you 2 Easy Ways to Implement Fluid Typography.

What is Fluid Typography?

So what is the Fluid Typography? Basically, if you want to implement font sizing in specific devices (viewport). The traditional method is to put CSS font-size in a different viewport.

An example: if you want to show 22px on desktop, 18px on tablet (I assume max-width around 992px) and 16px on mobile devices (I assume max-width around 768px).

here's how it looks:

body{
font-size:22px;
}

@media only screen and (max-width: 992px) {
  body {
    font-size: 16px;
  }
}

@media only screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

Imagine if you have a complex website which contains Heading 1 - Heading 6, and other things. Can you imagine how many CSS Output on your website?

In some cases, if you're using the absolute unit. You will see for some breakpoints don't match with your design. And of course, it will make you dizzy when you see a lot of code.

Fluid Typography is One of Your Solutions Yet

Fluid typography is come to be the solution. This technique is growing day by day. Fluid typography is a responsive sizing based on the viewport. We have two favorites method clamp() and calc().

Fluid typography also helps to produce clean code, easy to read, implement, much more responsive than traditional methods.

2 Easy Ways to Implement Fluid Typography

And here's our 2 Easy Ways to Implement Fluid Typography method to implement responsive sizing on the font as known as Fluid Typography.

Using Clamp()

Btw, thanks to oxygen to share Clamp CSS methods on YouTube. Here's the video how to implement Fluid Typography for Heading in Oxygen Builder.

So, we try to implement the method and it works perfectly. What is clamp actually is? Clamp is one of CSS functions a value between an upper and lower bound. clamp enables selecting a middle value within a range of values between a defined minimum and maximum.

There's 3 parameters: minimum value, preferred value, maximum allowed value.

Here’s the math, Credit to Oxygen Builder

@media (max-width:[viewport]) {
  h1{
    font-size: clamp([minimum size], [viewport/maximum-size], [maximum size]);
  }
}

In example: we want to applied 125px font size on desktop viewport 1900px. Now, we had viewport 1900px and maximum-size 125px. And let's calculate it. viewport/maximum-size 1900 / 125 = 6.5vw. For minimum size we want to show 67px in the small devices.

If you're lazy enough to calculate. Put your viewport and maximum size using this tool https://web-development.space/tools/px-to-vw/

2 Easy Ways to Implement Fluid Typography

Here's how this tool works. Just insert your own viewport (in example we're using 1900px on viewport and size 125px). And then click calculate and it will show the vw size. We got 6.579vw round it into 6.5vw. Here's how we implement Clamp font sizing in our website:

@media (max-width:1900px) {
  h1{
    font-size: clamp(67px, 6.5vw, 125px);
  }
}

Clamp() Pros

The advantage of Clamp() is easy to implement and the output we're so clean. It's easy to read it for the next developer.

Clamp() Cons

Browser support still limited. But if you want to achieve fluid typhography we can go into the next method.

Using Calc()

Calc() is one of the CSS function that you can implement fluid typography on it. Well, you can use Calc in so many different scenarios. Right now, we want to share how to applied into font-sizing.

After we know that clamp() browser support are so limited, then we dig it for the alternative. Until we found it on CSS Tricks: Fluid Typography.

Here's the math:

h1 {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Then, we want to use the same scenarios. In this case, we use minimum size for font=70px, then for the maximum size=125px (put it without px).

And the last one is determine maximum viewport, and minimum viewport that you want to show. Maximum viewport we're using 1900px and the minimum viewport we're using 360px.

So here's how it looks.

h1{
  	font-size: calc(70px + (125 - 70) * ((100vw - 360px) / (1900 - 360)));
}

References

  1. Fluid Typography by Geoff Graham
  2. Implementing Fluid Typography For Headings In Oxygen by Elijah Miils
  3. Fluid typography examples by Mike Riethmuller
Share This Article

You Might Want To Read

One comment on “2 Easy Ways to Implement Fluid Typography”

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow-right