Fonts & Font Sizing
Using Custom Fonts
We are using stock standard fonts found on almost every device, no font imports have been used. This keeps the template lean, and cuts down on the number of HTTP requests.
However, you can easily add your own custom fonts if you want to, using something like The Google Fonts library.
Just be aware that linking to this might slow your site down a little. But one or two custom fonts certainly won't hurt. And by using Google fonts, there is always the possibility the user already has that particular font cached. In that case the viewer doesn't even have to download your font before using the page.
Google Fonts makes product and web pages run faster by safely caching fonts without compromising users' privacy or security. Our cross-site caching is designed so that you only need to load a font once, with any website, and we'll use that same cached font on any other website that uses Google Fonts.
Font Sizing
If you look in the stylesheet, you might notice the font size settings in the body selector is set to REMs. You might be more familar with either px values, or even EMs, so why why was this sizing chosen, and what is the difference between a REM and an EM?
First thing to know, is the 1REM is equal to 1EM, which is equal to 100%, which is equal to 16px. So in that respect, it doesn't matter which font sizing we use.
We have chosen REM in preference to EM, because of the way the CSS heirachy works. If we set a font size of EMs, then that size is determined by the parent container. If we use REMs, then it is determined by the root element. The body selector.
A quick example should make this clear.
If the body element is set to 1EM, and we then set a section or container on the page to .9em, what happens if we set the font size again for some text inside that container? For example, .9em. It will display at 90% of 90% full size. In other words, much smaller than you expected.
This section of text in red, has the font set to .9ems
This next paragraph also has the text set to .9em, but notice how it is NOT the same size as the paragraph above? Instead, it is 90% the size of that. And that is why we use REMs, to make it easy to know and predict exactly what size the fonts will be.
Think of ems having the possibility of nesting sizes within sizes, whereas REMs will give you exactly what you ask for.