TIP - Make your font responsive without media-queries

Here's the point: Everytime that the browser can do a job for you, let the browser do it. Our goal, when we code to CSS is to guide this browser to do its best job. Take as example why people are trying to advocate for em over px.

This is the same scenario for media-queries: Our main mistake, is to create media-queries for everything in order to be "mobile first", but what we do is just re-creating several times a job that the browser could do easily with proper guidance.

Make your font responsive

How many times you saw something like

.my-title {
  font-size: 32px;

  @media (min-width: 752px) {
    font-size: 36px;
  }

  @media (min-width: 1232px) {
    font-size: 40px;
  }
}

 

3 definitions for a single rule. Imagine how can it be when there are 20 CSS properties defined here, trying to manage them in mobile first principle. That's why we need the media-queries, just for the necessary, and the rest just help the browser.

Here's my proposal:

.my-title {
  font-size: calc(1.8rem + 1vw);
}

 

Step by step:

• The calc() function performs a calculation to be used as the property value. Via W3Schools
• The vw holds for view-width. Relative to 1% of the width of the viewport. Via W3Schools

The vw is the magic sentence. It can hold for vw(view-width) or vh(view-height). Mainly it takes a 1% of your screen. So if your screen is 320px => 1vw = 3.2px If your screen is 752px => 1vw = 7.52px and if you have 1232px => 1vw = 12.32px. So there's a way that the browser can know dynamically the width of your screen, and we don't have to take care.

With the concept of vw now we combine it with calc. Assuming your font-base is 16px (the default unless you change it), that means:

Font-base = 1 rem   //Formula
font-base as 16px = 1 rem (16px) //Example
2 rem = 32px (2 times font base) //Example

 

1.8 rem holds for 28.8px. The rest I fill it dynamically with the dynamic with from vw

320px screen
- 1.8 rem + 1vw = 28.8 + 3.2 = 32px

752px screen
- 1.8 rem + 1vw = 28.8 + 7.52 = 36,32px

1252px screen
- 1.8 rem + 1vw = 28.8 + 12.52 = 41.32px

 

And with that, you got a responsive font. Probably you noticed the result of these numbers are not matching with the original 32, 36 and 40 we saw in the media-query. That's correct, probably you can play even more with the precision of the rem + vw combination, but in my opinion, is a small downside that I prefer to take instead of manually calculating the font-size with the queries. At the end we talk about .32px difference on Tablet and 1.32px on Desktop, the impact is minium compared with the benefit of good CSS code + good job for your browser. This solution is compatible for all browsers, included IE11.

I hope this can help you as much it helps me when I develop CSS. It really simplifies the idea and small tips like this are really changing the mindset of CSS to make it more interesting.

See the original post at my blog suetBabySuet