CSS3 Media Queries: Affect on Font Sizes

On my previous post I briefly talked about the different unit sizes contained in CSS. I stated that there were two types of unit sizes, these being fixed and relative. I also mentioned that relative sizes  are really powerful when creating scalable layouts. But, what do I mean by that? On this post I will explain how you can use relative unit sizes to display different font sizes depending on your screen size.

Why would you want to display different font sizes?

Consider the following layout:

Font size normal layout

The font sizes for the layout above were defined using ems. I added font-size styles to the h1, h2, h3 and p tags using the golden ratio 1:1.618. These font sizes look good on a big screen and I am happy with them. However, if we see this layout on a smaller screen, the title may be too big and the user would have to scroll down more to read more content.

Let’s see a comparison side by side. On the left we have no media queries and on the right we scaled our font size using media queries.

Not using media queries
  Using media queries

You can see that the layout on the right allows the user to see more content on the screen. You can play with this example live here.  Resize your browser window to see the font size change according to screen size.

How do we do that?

CSS3 has the expression called media, you can use this expression by putting ‘@media’ on your CSS style sheet. This is when relative size units come in handy!

First, let’s see how my CSS is defined without using media queries


body{
	font-size: 16px;
	font-family: sans-serif;
}

h1{
	font-size: 4.236em;
}

h2{
	font-size: 2.618em;
}

h3{
	font-size: 1em;
	line-height: 1.618em;
	text-transform: uppercase;
}

p{
	font-size: 1em;
	line-height: 1.618em;
}

You can see that I defined my body to have a base font size of 16px. Remember: 1em = 16px.

To easily change the font size, all we have to do is change the base. If we change the base to 18px, all tags will increase in size. If we change the base to 14px all tags will decrease in size.

Let’s add media queries to our CSS

@media all and (min-width: 960px) {
	body{
		font-size: 18px;
	}
}

@media all and (max-width: 959px) and (min-width: 600px) {
	body{
		font-size: 16px;
	}
}

@media all and (max-width: 599px) and (min-width: 320px) {
	body{
		font-size: 12px;
	}

}

The first media query defines the base font size to be 18px for screens with a  minimum width of 960px. This means that for screens with a width of 960px or more, we will display an increased font size. The second media query defines the base font size to be 16px for screens with a  minimum width of 600px and maximum width of 959px, meaning that our font size remains the original size. Note: we didn’t even need this directive since our default is already 16px. The last media query are for screens with minimum width of 320px and maximum width of 599px. Here we want our font size to be of base 12px, meaning that we want them smaller than our initial base.

Just by changing our base font size the entire CSS changes. We don’t have to manually change the font size on all of our tags. Had we used pixels, we would have to change all sizes manually.

Don’t forget to add the meta tag on your HTML:


<meta name="viewport" content="width=device-width" />

Not adding this meta tag will cause the site to still load zoomed out rather than zoomed in.

Media queries can be an entire chapter in a book. On this post I assume you know what media queries are and how they work. I only showed you how you can use them to display different font sizes. If you are not familiar with media queries you can read more about it here.

For a list of media queries, check this website

Remember that web design is 95% typography! It is important that you get that right.


Posted on: March 16th, 2014 by Stephani

Leave a Reply