CSS

How To Change Font Size

I think I already know how to change the size of the font on my website.

Oh ok, this will be a short lesson then.

You use a different HTML tag, right?

Use one of the header tags to make larger font.

You can do that, but what if the default styles aren’t what you want?

Easy. I give up and ask you to do it for me while I nap.

Using only the HTML tags to style your text gives you very limited options as you can only use the six header tags or the p tag to make a paragraph element. Instead you can use CSS to style your text to suit your website.

One way might be to change the size of the paragraph elements on your website. This is done using the font size property in CSS which looks like this:

        font-size: 
      

There are some quick keywords you can use to assign a value to this property. Let’s look at some examples below.

Extra Large Text

Large Text

Medium Text

Small Text

Extra Small Text

This is done with CSS using the font-size property.

        font-size: x-large;
        font-size: large;
        font-size: medium;
        font-size: small;
        font-size: x-small;
      

If I say that I want all text to be medium size, won’t my headers and paragraphs be the same size?

No. These values affect different HTML tags differently.

So an element created using the h1 tag set to medium will be larger than a paragraph element also set to be medium.

Mmm, it sounds like this easy option doesn’t give me a lot of control?

It doesn’t. But it is very quick and can be convenient.

Aria: small;

If you want to be really precise then you can set the font-size property to a custom value. This needs to be in two parts.

The first part is a number and the second part is the unit of measurement.

The number will be used to dictate how big the font will be; but this number is pretty useless without the unit of measurement.

Let’s say you are running out of cat food and someone asks you to buy one. So, is that one sachet? One box? One crate?

Definitely one crate.

Or is it one teaspoon full? One gram?

Nooooo! Definitely more than that!

Being asked to buy one cat food is pretty useless. To get it right you need to know the unit of measurement and it’s the same when defining font size in CSS. Without it, the number you give the computer is meaningless.

Let’s have a look at three common units.

Pixels

One option is to define your font size by a number of pixels. This gives a fixed size for your font but it can vary depending on the resolution of the screen your website is shown on. So on a high resolution screen, your font may appear smaller as the pixels are smaller.

You can set font size with a pixel number like this where ‘px’ is used as shorthand for ‘pixels’:

        font-size: 32px;
        font-size: 16px;
        font-size: 12px;
      

The result looks like this.

Big words for big paws.

Normal font for most cats.

Tiny text for kittens.

This is referred to as a fixed measurement as your text will always use the same, fixed number of pixels. While this gives you a lot of control, it means that browser settings won’t change your text.

This is important as it might make it difficult for a user with visual impairments to use your website.

Use the box below to try out the different font sizes using pixels.

        font-size:px
      

Here I Am!

Percentages

Another option is to use percentages and that looks like this:

        font-size: 250%;
        font-size: 100%;
        font-size: 70%;
      

This is the result.

Big words for big paws.

Normal font for most cats.

Tiny text for kittens.

With percentages, your text is scaled based on the size your font would normally be.

For example, this scaling may be based on the default font-size or if you had set all text to large font with CSS and then a specific element to 150%, then this element would be even larger.

Use the box below to see what different percentages do to your text size.

        font-size:%
      

Here I Am!

Ems

The third option is to use ems which are very much like percentages but scaled from 1em rather than 100%.

        font-size: 2.5em;
        font-size: 1em;
        font-size: 0.7em;
      

And this is what that would look like:

Big words for big paws.

Normal font for most cats.

Tiny text for kittens.

Ems might seem pointless when you can use percentages but there is a slight difference. When a user changes their browser settings, for example if they are a person with a visual impairment, then text styled with ems will scale depending on that setting.

Try out ems on your font size with box below

        font-size:em
      

Here I Am!

So which one should I use?

If you need a lot of control then use pixels.

But be careful as your text might be difficult for some users to read.

So I should use ems or percentages?

Ideally, yes. These scale for your users and so are the most accessible.

Well I want everyone to be able to use my website, so these sound good for me.