{

How to write 100% Responsive font sizes effectively with css


In this tutorial, You learn how to make fonts works responsive in mobile,table and desktop.

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

Typhography is one of the important point for 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 are applied to below items

  • body
  • input elements
  • headings like h1,h2
  • paragraphs Let’s see an example for 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 is declared with 14px Heading tags are defined with different pixels.

It works perfectly in desktop and mobile a nd table, Font size looks more than 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 also called relative units

1vw - 1% of total device viewport width 1vh - 1% of total device viewport height 1vmin - smaller among 1vw or 1vh 1vmax - larger among 1vw or 1vh % - Percentage of screen resolution EM -It is relative size for 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, 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 makes 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 practice and guidelines

  • Always dynamic relative units like Percentage(%),EM,REM vw vh, avoid using fixed sizes in pixels
  • If required use media queries to support desired font size for min and maximum fonts
  • applying css in body applies to entire applicaiton or website, So body font should be 16px by default. This is 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 hierarchy of sizes, like h1 for 30px,h2 for 25px etc.. It looks text readable and improve mood of the user in Desktop users, The same way applies with relative units on mobile devices

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.