How to write 100% Responsive font sizes effectively with css

How to write 100% Responsive font sizes effectively with css

In this tutorial, You learn how to make fonts work responsive on mobile, tablet, and desktop.

To make it 100% responsive, Each displayed element should work as expected in screen resolutions. It helps users to read the text across screen and device sizes.

Typography is one of the important points for a better UX view. In CSS font sizes can be configure using fixed sizes(in Pixels) or relative units(Percent,EM,REM,VW,VH,VMIN,VMAX)

In any application, font-sizes apply to the below items.

  • body
  • input elements
  • headings like h1,h2
  • paragraphs Let’s see an example of normal CSS font sizes for desktop or web application
body {
  font-size: 14px;
}

h1 {
  font-size: 24px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 16px;
}

As you can see, Normal text declares 14px Heading tags defines by different pixels.

It works perfectly on desktops, mobiles, and tablets, Font size looks more than the expected size.

That means we have to fit dynamically the change the text size based on screen resolution and device top.

There are multiple ways we can make font size responsive.

One way is using viewport height and width Another way using media queries.

Viewport sizes

There are multiple viewport sizes which are also called relative units.

1vw - 1% of the total device viewport width 1vh - 1% of the total device viewport height 1vmin - smaller among 1vw or 1vh 1vmax - larger among 1vw or 1vh % - Percentage of screen resolution EM -It is the relative size for the base font size REM- Relative size to root base font-size

You can use any of those relative units to apply styles

body {
  font-size: 16px;
}

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}

Media queries to responsive font size

Media queries are helpful to apply styles based on min and max screen resolution.

In this example, the base body is 20px font size for desktop.

Changed to 18px,16px,14px for device width 720px, 640px,320px etc.

Here is an example simple demo of how media queries make font responsive.

body {
  font-size: 20px;
}

@media all and (max-device-width: 720px) {
  body {
    font-size: 18px;
  }
}

@media all and (max-device-width: 640px) {
  body {
    font-size: 16px;
  }
}

@media all and (max-device-width: 320px) {
  body {
    font-size: 14px;
  }
}

You can change the values to either fixed pixels or relative units.

You can also check-writing media queries in sass

CSS responsive font-size best practices and guidelines

  • Always dynamic relative units like Percentage(%), em, rem,vw, vh, and avoid using fixed sizes in pixels
  • If required use media queries to support desired font size for min and maximum fonts
  • applying CSS in the body applies to the entire application or website, So the body font should be 16px by default. It is the primary font size
  • Secondary fonts or Input forms like labels and UI elements should be 12 or 14px by default
  • Always design header text with the hierarchy of sizes, like h1 for 30px,h2 for 25px etc. It looks text readable and improves the mood of the user on Desktop users, The same way applies with relative units on mobile devices

Conclusion

You learned the importance of typography font sizes in design and how to make 100% responsive font sizes in desktop and mobile device screen types.