3 Methods of Solving UN-responsive Fonts (w/ CSS)

Responsive fonts…

As text plays a big role in websites, you want to make sure that it looks great for everyone no matter what device they use. And, it gets tricky as there are so many screen sizes to worry about.

Let’s first take a look at some examples of UN-responsive fonts to understand why it matters. Some developers use desktop-first approach when building websites, while others use mobile-first.

I will show you 3 methods of solving this issue. I divided them into 3 levels:

1. Easy


2. Medium


3. Hardcore

1. Easy - change fonts based on viewport

Let’s start with easy one.

It’s not actually easy and can get tricky if you’re new to media queries. Basically, we first declare our variables in CSS, because we can use them later in our code. Next, let’s name our variables and set values.

:root {

  --font-sm: 0.875rem;

  --font-md: 1rem;

  --font-lg: 1.25rem;

  --font-xl: 1.75rem;

  --font-2xl: 2.5rem;

  --font-3xl: 4rem;

}

And, yes, rem is better than px. You can read it

It’s not responsive yet. I want the text size to change when it reaches a certain viewport. Let’s say 600px. Past the value, text looks too big on phones. Thus, we use media query to change the values of our variables we set up earlier.

@media (width < 600px) {

  :root {

    --font-sm: 0.875rem;

    --font-md: 1rem;

    --font-lg: 1.25rem;

    --font-xl: 1.5rem;

    --font-2xl: 2rem;

    --font-3xl: 3rem;

  }

}

For this time, we want the values to be smaller than original because we are working on mobile device.

to generate the best responsive font sizes for you.

We first set the minimum and maximum font size for our base font, like paragraph. And, we have to set the type scale ratio. The calculator generates the font sizes based on these values.

if you want to view it. It’s not the cleanest code in the world. If you have your own approach, please let me know in the comment.

And, there you have it! Hope you learned something new. Let me know which approach you’re going with. As always, thanks for reading, and I’ll see you in the next one! 👋