PUBLISHED ON: AUGUST 5, 2021
How to create responsive typography with CSS?
A website should contain good typography which keeps the user intact. The typography should also adjust itself along with the change of device size. We can make responsive typography by applying some CSS properties
Responsive typography with CSS
We are going to create responsive typography using CSS. So, we should use viewport width to adjust the size of typography, and we have to use vw unit (1vw is 1% of the size of the viewport) to set the size of the text.
We can also use Media Queries to set the size of the text at different widths of the viewport. The media query rule is defined with @media with max-width or min-width of viewport.
Example: Responsive typography using viewport width
In the given example, we have used vw unit to create responsive typography.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
h2 {
font-size: 5vw;
}
p {
font-size: 3vw;
}
</style>
</head>
<body>
<h2> Responsive typography </h2>
<p> The text size will adjust with the change of the width </p>
</body>
</html>
Output
Here is the output of the above program.
Example: Responsive typography using media query
In this example, we have responsively changed the font size of the text for screen sizes larger than 600px and smaller than 599px.
Conclusion
In this tutorial, we have seen a couple of ways to create responsive typography using CSS. Either use vw unit or media Query rule to do so. These are the simplest way to create responsive typography.
