Font size

Font-Size is a huge debate of its own, the general consensus is to never have content text smaller than 16px, it is easier to read, faster to scan, easier for people with dyslexia or sight problems (although there are fonts aimed specifically for these disabilities too).

As a rule I rarely go below 16px, normally I will actually use 18px for my font-size for content as I focus quite heavily on accesability on the websites I build as they are aimed at huge markets where even a minority of users make up a large number.

This is just a general rule though, if something looks to small to read.. make it bigger, is it hard to scan through and read quickly.. change the font or spacing.

There is no real definitive rule for font-sizes but it is reccomended not to go below 16px (this doesn't apply to fonts that are generaly larger then most standard fonts).

I pretty much start most my css files with this rule applied to the body of my page:

body {
   font-size: 16px;
}

This sets the default font-size for all my content as 16px and overides browser defaults (not all browesrs default to 16px)

I then use em values for my font-sizes allowing me to easily change all font-sizes on my pages for responsive design.

If body font-size is 16px, 1em on any element will equal 16px.

For example:

body {
    font-size: 16px;
}

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

h1 {
    font-size: 2em;
}

p {
    font-size: 1.2em;
}

To quickly explain the above example:

• First I set body font-size to 16px this will set the default and overide browser defaults.
• Secondly I have a media query that if the availible display is wider then 1000px to increase the default font-size to 18px;
• If you look at h1 I have set font-size to 2em, this will be 200% of the default so will equal 32px.. or if my media query is active due to the display being 1000px or more wider it will instead equal 36px.
• Same again with p, it will be 120% of the default font-size declared on body so 19.2px and 21.6px with the media query active.

This saves having to make hundreds of media queries to change all the font-sizes across your page, instead you can chaange them all relatively just by doing a media query on the font-size of body.