More and more people are using mobile devices every year, tablet computers are also very popular. And this means that each web site should work properly on all applicable screen sizes.
If you set the font size only for desktop view, then your pages may not look good on small devices. As a result, you should improve the visual presence of the site and make it pleasant for various devices.
There are two methods that you can use to make the font responsive, the first one is "media queries" and the second is "viewport-percentage lengths". We will describe both in detail and you may choose the solution that is the most appropriate for your web application.
Media queries
You can use media queries to change the style and layout of some HTML elements for the desired screen sizes. For example, you may write separate CSS rules for the desktop, table and mobile devices and adjust your styles to make the content look properly in various conditions.
Also, for reference on how to use media queries to make the font responsive, we provide a very simple demo. There, you can see that we set font size for the body and h1 tags, which contain a sample text.
For the desktop view, the fonts are large, and for tablet and mobile devices, the sizes are smaller.
Please review the following demo, you can use it as base for your code and adjust or extend the styles.
<!DOCTYPE html>
<html>
<head>
<title>Web Application</title>
<style>
body {
font-size: 20px;
}
h1 {
font-size: 36px;
}
@media (max-width: 1023px) {
body {
font-size: 18px;
}
h1 {
font-size: 30px;
}
}
@media (max-width: 767px) {
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Delectus dignissimos mollitia eaque iure, eligendi vitae,
provident laborum facilis voluptatibus reiciendis.
</p>
</body>
</html>Now, you can save the above code into a HTML file, run in the browser and change windows size to see how exactly font size is reduced or enlarged on different screen sizes.
Also, most of the browsers have developer tools that allow rendering specific pages in preconfigured viewports that reflect the settings of the real mobile devices.
Viewport-percentage lengths
You can configure the font size to be relative to the size of the current viewport in the browser. To achieve this, you have to use the 'vw' unit, which equals 1% of the width of the viewport area. For example, 2vw equals 2% of the viewport, 3vw equals 3%, and so on.
<!DOCTYPE html>
<html>
<head>
<title>Web Application</title>
<style>
body {
font-size: 1.8vw;
}
h1 {
font-size: 2.2vw;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Delectus dignissimos mollitia eaque iure, eligendi vitae,
provident laborum facilis voluptatibus reiciendis.
</p>
</body>
</html>But the issue with the above methods is that the font may be too small on mobile devices, and likely on tablets as well. As a result, you may consider using some base value and adding viewport-percentage length to it.
For that purpose, the calc() function can be used. It allows us to perform math calculations on simple values.
Please review the sample below. For the body tag, the base font size is 14px and then the 0.5vw length is added. The similar is done for the h1 tag, the base font size is 22px and 0.5vw length is added.
Please try the following example, and you should see that the font is responsive and looks fine on both desktop, tablet, and mobile devices.
<!DOCTYPE html>
<html>
<head>
<title>Web Application</title>
<style>
body {
font-size: calc(14px + 0.5vw);
}
h1 {
font-size: calc(22px + 0.5vw);
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Delectus dignissimos mollitia eaque iure, eligendi vitae,
provident laborum facilis voluptatibus reiciendis.
</p>
</body>
</html>You can also use the max() CSS function and specify two values that the browser should use for calculations. If the second argument, which is viewport-percentage length, evaluates to a value which is too small, then the browser will use the first argument.
In other words, the font-size properly will be set to a maximum value from the given options. And it allows to make the font suitable for the small or medium size devices.
<!DOCTYPE html>
<html>
<head>
<title>Web Application</title>
<style>
body {
font-size: max(12px, 1.8vw);
}
h1 {
font-size: max(16px, 2.2vw);
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Delectus dignissimos mollitia eaque iure, eligendi vitae,
provident laborum facilis voluptatibus reiciendis.
</p>
</body>
</html>The other way to make the font responsive is to use the clamp() function, which accepts three parameters, they are the minimum value, desired value and the maximum possible value. The function will choose the value that is the most appropriate in a specific case.
<!DOCTYPE html>
<html>
<head>
<title>Web Application</title>
<style>
body {
font-size: clamp(12px, 1.8vw, 30px);
}
h1 {
font-size: clamp(16px, 2.2vw, 36px);
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Delectus dignissimos mollitia eaque iure, eligendi vitae,
provident laborum facilis voluptatibus reiciendis.
</p>
</body>
</html>CSS is a very powerful language, and you can review official W3C documentation or other guides and create more advanced rules that suit your specific needs.
Conclusion
As you see, it's very easy to make the font responsive, you just need to choose the appropriate solution and implement it in your code.
The only note is that you should probably make a code which is compliant with the existing code base. For example, if you use a framework or theme which implements media queries, then it's wise to use the same solution. Or as opposite, if the existing project contains viewport-percentage lengths, then it makes sense to follow the same pattern in your new code.
Comments