Anyone who handles CSS/HTML is going to eventually have to deal with fonts in one way or another. Today, we're going to go over some of the do's, don'ts, and things to consider when it comes to fonts and how you use them on your site. This is nowhere near an exhaustive guide to using fonts, but it should be a good starting point regardless. While they're technically fonts, this guide doesn't cover glyph fonts like FontAwesome, as it is more concerned with accessibility than aesthetics.
Picking A Font
This needs to be broken down into two decisions; typeface, and font face. There are 4 styles of typeface, and countless font faces to choose from, and your selections will greatly affect the feel of your site and how readable it is. These selections will also dictate every other decision you make when it comes to styling your fonts, especially sizing which we will get into soon.
The four typefaces are:
Serif: Serif typefaces are the ones with a short, decorative stroke at the end of a longer stroke on a letter, such as Times New Roman.
Sans serif: Sans serif typefaces are simply fonts that don't have this shorter decorative stroke, like Arial or Calibri.
Monospace: Monospace typefaces take up an equal amount of horizontal space for each letter, regardless of the visual width of the letter, like Courier.
Script: Script typefaces are considered decorative and generally appear hand-written, such as Comic Sans.
A good rule of thumb is to use a single sans serif font for the main bulk of your text, and another font for your headers and accent text and never use more than 3 fonts on your site. Google Fonts has a massive list of font faces in every category, and is a great resource for all of your font face needs. If you're indecisive, you can also simply specify serif, sans serif, or monospace for your font face. I wouldn't recommend this with script, however, as the default is general Comic Sans, which a lot of people find childish in a font.
Font Sizing
Picking the right size for your font is arguably just as important as finding the right font face, if not even more so. Even the most beautiful font means nothing if its too small to read. While you might like the absolute control px measurements provide, it can be considered a browser behavior hijack of sorts, in that it forces control of font sizes away from the user and into your hands. We want to avoid browser behavior hijacking and maximize accessibility to our sites, and thus I present to you the rem measurement!
Rem is a relative measurement of font size, meaning that it will display the font as a size relative to what your user's browser size is set to. A smaller number will result in smaller text, and a larger number will result in larger text. Think of it in terms of percentages, with 1rem equaling to 100%, 0.5rem being 50%, 1.5rem being 150%, and so on. You always want to set the font size of your body to 1rem as a starting point, and consider going to perhaps 1.1 or 1.2rem for serif fonts as they tend to be a bit harder to read at smaller sizes. Additionally, the fancier a script font is, the larger it needs to be, and I would strongly suggest not dipping below 2rem for these.
Font Colour
The colour of your text is almost as important as the size of it. The key thing to avoid is letting your font blend into your background, or contrast so strongly it causes eye fatigue. On a white background, for example, both baby pink and black are going to be almost equally uncomfortable to read for more than a few words. An off-white colour like #aaaaaa is great for darker backgrounds, while a dark grey like #111111 is good for lighter backgrounds. You can quickly check this by adjusting your screen's brightness in a dark room. If the text becomes hard to read when you lower your brightness, the contrast needs to be increased. If your text becomes uncomfortable to read when you increase it, you need to scale back the contrast slightly.
When it comes to headers, there's another option for the code-savvy among us; text-stroke. Its supported by every browser with the exception of the mobile version of Opera. That being said, avoid using it on your main body text as this can make it hard to read all on its own. It can be a powerful effect, but with great power comes great responsibility.
Line Height and Letter/Word Spacing
Generally speaking, you don't want to mess around with your line heights, or letter or word spacing. If there is an issue with one of these things, simply pick a different font, as you can seriously mess with people's ability to visually track the lines and words as they read them. Decreasing line, letter, and word spacing tends to result in text bunching up on itself, and spaces between words suddenly disappearing or becoming hard to find. Increasing any of the 3 can be just as damaging, as it can cause the eye to be dragged away from the text by what's known as rivers; white space between letters/words that coincidentally align across multiple lines. The only exception to this rule that should even be considered is in the case of headers, and even then it should be used sparingly and only to slightly increase line height or letter/word spacing.
Forcing Letter Cases
Forcing text into all uppercase or lowercase letters is something I consider almost a sin in web design, especially in a roleplay site. You're hijacking the ability to decide letter case from your members in a lot of cases, and it can dramatically affect readability on your site because it breaks the general expectations people have for properly formatted text. Nobody likes it when the page is shouting at them (and it does weird things to screen readers), and all lowercase makes the writer seem lazy or incompetent. The same goes for code that forces the first letter of every sentence to be uppercase, or (perhaps the worst of all) code that forces the first letter of every word into uppercase. Aesthetics be damned, don't do this. Even for headers. Period. The only exception to this rule is the small-caps option, and this should be used very sparingly. As in headers and accents only sparingly. Also, increase your font size by at least 0.2rem if you're going to use it as some fonts do wonky things.
Text Alignment
Font alignment is, in short, which side of the screen your font pushes against. There's left (the standard for websites), center, and right aligned text. Generally speaking, leave this one alone because we expect our lines to start neatly pushed up against the left side of the page/box. Like messing with line height and word/letter spacing, this can seriously affect the ability to visually track the text your user is reading. In the case of headers, keep it left or center aligned, as right aligned headers with left aligned text can confuse some people. The exception to this is if you have a border under/box around your headers that spans the whole width of the page/box its being used in, and even then use it sparingly.
Justify and Word Breaks
Justify and word break, while technically two different things, tend to be used hand-in-hand, and pose an absolute nightmare for accessibility (and are what inspired me to write this guide). Justify is the black sheep of text alignment, setting the text to align against both the left and right sides of the screen, and word break forces words that don't fit at the end of a line to hyphenate and continue on the next line. Setting alignment to justify has a nasty habit of creating rivers in your text, as it messes with letter and word spacing in a big way. Word break may seem a little more innocent on the surface, but it forces words to break in weird places instead of between syllables as is grammatically correct, and can thus cause confusion. Justified text and word breaks are standard in print media because there are people who's sole job is to make sure words break properly and that rivers don't show up in the text. This is simply impossible online, so avoid both of these at all costs. Even for headers.
Some Final Thoughts
Before I let you run amok with your new font knowledge, I've got a few more quick things that don't really require more than a full section of their own. Instead, I'm just going to throw them into bullet points.
- Always distinguish your bold, italics, and links from the main body text with a different colour or font face, not a different size.
- Never put text directly on top of an image/texture. This makes it near impossible to read most text, even if you use an outline.
- Unless you need to change the font styling on a specific element (such as bold text or headers), let the font styles you set for the body dictate things. This helps to ensure cohesive fonts across the site, and prevents mistakes.
- Only load the fonts you need. This is more for loading times, but it also helps reduce mistakes because you have a list of the fonts available right there in your CSS/HTML.
- If your font doesn't quite look right for any reason, find a new one instead of trying to force it with CSS.
- If you have good vision, find a friend or relative that needs glasses, and let them look over your site both with and without their glasses. This can sniff out issues that you might've missed.
Now, go forth and design readable sites!
-
1
