How to change font-size using Media Queries

A responsive website alters its appearance depending upon the device on which it is being displaying it. For the purpose of making a website responsive, make use of the CSS media queries. These queries allow you to change a particular feature of your website based on the width, or screen resolution of the device. For instance, you can either hide an element based on the screen size or change the font size of the website content, etc. Here we will show how you can alter the font size of the text appearing on your website using media queries.

How to change font size using Media Queries

Making the text responsive on a website is referred to as Fluid Typography which means that your text will change its size based on the screen size of the device. Here we will present you with two different methods to making your website text responsive.

Method 1

The first method that can be used to make your text responsive is by using media queries. Here is an example.

HTML

Here we have stated a paragraph on which we are going to demonstrate how to change font size using a media query.

CSS

First of all, we are using some basic CSS to provide some background color and padding to the paragraph.

CSS

The first query applied states that if the minimum screen width is 700px or wider then the font size of the paragraph will be 25px.

CSS

And this last query states that if the maximum width of the screen is 699px or lesser then the font size of the paragraph will be 16px or wider.

Output

When the screen width is 700px or wider.

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-38.png" data-lazy- height="669" src="data:image/svg xml,” width=”1798″>

When the screen width is 699px and lesser.

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-39.png" data-lazy- height="670" src="data:image/svg xml,” width=”1796″>

The font size was successfully changed using media queries.

Method 2

The second approach that you can use to resize your text is by using the viewport width. Using this the text will alter according to the size of the browser.

HTML

In the above code, we have defined a heading and a paragraph and we will apply viewport width on these to alter their font size with respect to the browser window.

CSS

Here we have set the font size of the heading to 9vw. The unit vw stands for viewport width.

CSS

As far as the font size of the paragraph is concerned the font size has been set to 4vw.

Output

<img data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image.gif" height="588" src="data:image/svg xml,” width=”769″>

The method is working properly.

Conclusion

For the purpose of making the text appearing on web pages responsive you can use media queries. In the media query, specify the font size of the text at any particular width and the font size will alter according to the device type. Another method of performing this task is to use the viewport width. This method simply requires you to assign a certain font size to the text in ‘vw’ unit. Both of these methods have been discussed in this post with the help of relevant examples.