Mobile Seo Use legible font sizes

There are many screen sizes now so we must make the text of our pages legible (easily readable) on the smallest and biggest screens.

To check if your font size is too small try the Mobile SEO tool.

Make font size work for any size device

There are a few ways to accomplish this. We will discuss the following options...

1. Buy a mobile theme / template
2. Use responsive design / media queries (css)
3. Design different versions of your site

What option you choose for your webpage or blog will pretty much be determined by what time you are willing to put into it, and what experience you have (or are willing to gain).

1. Buying a mobile theme or template

Google recommends ¹ responsive design. With a responsive design theme you will have the problem of font size already solved for you.

Good places to buy modern responsive themes and templates are..

• Creative Market
• Theme Forest

2. Use responsive design / media queries

If you have experience with CSS and are not scared to learn a bit more of it, you can control in great detail how well readable your text is on any screen size.

How font size works

The size of your font is declared in your CSS file. If no font size is declared the browser will use a default font size which is typically 16px.

The thing that controls your font size in CSS is called (not surprisingly) "font-size". It looks like this in your css...

Font size can use different unit of measures to declare how big your text should be - pixels (px), points (pt), EMs (em), and percent (%) in the example code above it uses percent.

Google recommends ² the following when it comes to font and responsive design:

• Use a base font size of 16 CSS pixels. Adjust the size as needed based on properties of the font being used.
• Use sizes relative to the base size to define the typographic scale.
• Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
• Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.

Let's discuss each of the above recommendations...

Use a base font size of 16 CSS pixels

This is saying to declare a font size for your page explicitly as 16px. To do this means we use CSS to state a page wide instruction that the font size is 16px. This is usually done using "body" or "html". This also tells us to "adjust" our fonts (which is explained in the next point).

Use sizes relative to the base size to define the typographic scale.

Now that we have a font size for the whole page, we will need to adjust that font size so our H1s and h2s etc. are appropriately larger than the base font size of 16 pixels.

The way Google is recommending to do this is "relative" to the base font size. For our examples we will use percentages to accomplish this.

In the above image we see that our H1 font-size is declared as "250%". This basically just means that our H1 text will be displayed two and half times bigger than our base size of 16px. This is the "relative" part. It means that wherever we declare a font size, it is always declared as bigger, smaller, or the same size as our base font size of 16px.

By doing this we are ensuring that no matter what size screen our page is seen on, our font size relationships will always stay the same. Our H1 will always be two and a half the size of our base font whether shown on the tiniest phone or the most gigantic TV screen.

This will also play an important part of making sure that font is easily readable (legible) when a user is viewing the page on mobile or smaller screens.

Text needs vertical space between its characters and may need to be adjusted for each font.

Another important aspect of readable font is amount of space between the lines of text. In CSS this is called "line-height".

Google recommends to use at least the browser default line-height of 1.2 which means that the space between the lines of text are at least 1.2 times the size of the text itself.

To make this happen we can declare the line-height in our CSS...

We often read our our own webpages on our desktop monitors and may have tight text and small line heights and it works fine. The problem occurs when you see that same text on a smaller screen and the text is nearly impossible to read without zooming.

By making sure our line-height is at least 1.2 we help ensure that our text is easier to read even on those small screens.

List link issues

Links need more room on mobile devices, and this can often become an issue when you have links in ordered or unordered lists.

To solve this issue try:

This will make sure there is plenty room around the links in a list by increasing the line height of the list. You will have to tweak it for your own needs by changing "200%" to another value that fits your site design.

Restrict the number of fonts used and the typographic scale

Too many fonts and font sizes lead to messy and overly complex page layouts. Overly complex page layouts may or not be readable on a desktop, but they sure won't be easily readable on a smaller screen.

Remember that your "small" text will be even smaller on a mobile device.

How to make font readable on any device

The size of our text is controlled by the media queries we declare for different sized screens. We can say that for mobile users we want one size of text, and declare a different size of text for desktops.

Let's take a look at a simple example media query to control the size of our font.

In the above example we have the same font-size declared for large screens and small screens. The font size is "100%" and since we declared the base size of 16 pixels earlier, this means our font size will be 16 pixels on both desktops and smaller mobile devices. This size font may be shown differently on different devices, but it will always be nice and legible.

This is quite readable on both types of devices especially when we follow all the above listed recommendations. We will typically have legible text on both desktops and devices. In this case it works.

Where a problem may come along is when we style our desktop text to be rather small. In this situation the same text will be seen even smaller on mobile or smaller screens.

In this scenario we will need to change our media query. The first example code above had the same value (100%) for both desktops and mobile devices.

Let's look at a media query that would have smaller tight text on a desktop, but still have readable text on a smaller screen.

This media query is saying that text should be 90% (of our default 16px) on desktop, but on mobile it should be 110% (of our default 16px).

This means that the text is easily readable on different sized screens.

• To learn more about media queries - go here
• The above media query settings may or may not work for you. The values were only used to illustrate points.

3. Design different versions of your site

If your website is not responsive, you likely are using a mobile url or dynamic serving for your mobile visitors.

In this scenario you are just creating different versions of your webpages, and can style the mobile page however you want using normal CSS.

It would be good practice to ensure your text is large enough (16px) and that your line heights are big enough (1.2) to allow text to be easily readable.