This post presents the basics of typography through a set of rules to follow. Like all rules they are made to be broken, but you should learn them first before you start breaking them.
If you follow these rules your web typography won’t suck. It will most likely be pretty good.
The simplicity of the rules is that they are generally easy to write and understand. Following them can be more difficult.
1. Know your audience
You need to know who is going to read the content of the site and why they are going to read it. Some examples of questions you might ask and answer:
- Why will the target audience come to the site? What do they need/want to read/learn/experience on the site?
- Are they tech-savvy with the latest browsers or behind the times?
- How old are they?
- Will then need to print the text?
- Will they find the sire through search engines?
2. Know your content
Read the content if you didn’t create it and get an idea of what it’s saying and what is more or less important. The fonts you choose and how you style them should be based on your knowledge of the content and understanding of your audience.
3. Make Sure the Text is Readable
After you know what content you have an who’s reading it the first rule of setting the type is to make it readable, also known by the technical term: legible. There are five main considerations to making something readable:
- Contrast (the color of the text should contrast with the background color or image)
- Size (the text must be big enough to read, minimum 10px for body text, 12-16px is better)
- Measure (line length, if your line is too long or too short it’s hard to read. 50-70 characters per line is a good rule of thumb)
- Alignment (left aligned is easiest to read. Start there and only add justified, right or center alignment for emphasis or visual style. Easy on the center alignment)
- Space (there needs to be whitespace around text so it can be readable. This includes both line-height, the space between lines, and the space between blocks of text like paragraphs and headings.
4. Establish a Typographic Hierarchy
Your content is made up of different parts, titles, text, quotes, asides, sub titles, locations etc. Each of these parts should be given a typographic treatment so that the reader can quickly see a) what’s more and less important, b) what is what (each part is distinct)
Some tools you have to make the hierarchy:
- Size (bigger = more important)
- Color (often for emphasis)
- Weight (bold = more important, use sparingly)
- Style (things like italics and ALL CAPS add emphasis, use sparingly)
- Distance (similar items grouped, different with space in between)
- Repetition (the same part like headings, links should look the same throughout)
This tool lets you set a bunch of properties visually using sliders and things and then you can get the CSS to paste into your project. There are three columns so you can compare options. Make sure you set the base font-size to the one you are going to use first. You set the base font near the top-right of the screen http://classic.typetester.org/Modify text with sliders, get the CSS to make it happen in the next window.
A good test to see if your hierarchy is in place is to see how scannable your page is. Can you very quickly glance at the page and see the various sections, paragraphs, asides etc.?
This post on Typographic Hierarchy gets into further details.
5. Start from Scratch or at least the same place
Browsers have default styling for all of the HTML elements (including font, margin, padding etc.). The problem is that each browser is a bit different with their defaults. There are two ways to address this: normalizing and resetting.
Remember, use one or the other, not both!
Normalize
This method adds a CSS stylesheet that basically modifies all of the settings so that text will look the same for each browser. The most popular way to do this is to use the CSS file provided by Necolas on this site: https://necolas.github.io/normalize.css/ Feel free to download and use in your projects.
Reset
Using a reset stylesheet does a couple of things. It removes all of the default spacing (margins, padding). This, in turn, forces you to make decisions about what kind of spacing you actually want to have around your elements. Just going through this process of thinking about and implementing your spacing will help make you better. Also if you don’t use this then the browser often decides and they don’t all have the same ideas about how much spacing things get.
Here is a link to a popular reset stylesheet by Eric Meyer: https://meyerweb.com/eric/tools/css/reset/
6. Punctuation and Special Characters
The text editors we use to create HTML are not so good at adding in the proper punctuation like opening and closing quotes, em dashes or math symbols. To remedy this problem use HTML Entities. HTML Entities are special HTML codes that when the browser sees turns into the proper symbol. For example the opening (left) quote is “ All HTML Entities start with an ampersand (&) and end with a semi colon (;).
This cheatsheet from Typewolf has examples and explanations of many of them including keyboard shortcuts for typing them: https://www.typewolf.com/cheatsheet
This page has a more streamlined list of most common ones you will need:http://www.teachingmultimedia.com/mmp240/thisisnotthat.html
More on em and en dashes and entities: http://www.alistapart.com/articles/emen/
7. Choose your fonts carefully
When choosing the fonts for a page think both about choosing fonts that are readable and ones they help express the mood or theme o the design and the content. One rule of thumb: sans serif fonts for the body text. You can use more detailed fonts for the bigger headings.
- Limit number of fonts (like maybe one or two to start. Add more if you know what you’re doing and the design calls for it)
- Pick fonts that fit the tone of the content and overall design
font-family property
When choosing a font-family add at least two fonts and also a generic font (serif, sans-seif, monospace…). It’s best if you have the following, in order, in your list
- The font you want
- A secondary font that’s OK that Windows should have
- A secondary font that’s OK that OSX should have (if it won’t have the Windows font).
- the generic font type (serif, sans-serif, monospace etc.)
More information on font family is in this post: Using the font-family CSS property
You should have a basic font-family for you paragraph text and one for your title text. Below is one way to do that. You set your baseline paragraph text by setting the font-family of your body element and then you set the font-family for all of the heading elements for the title font.
/*for the paragraphs */
body{
font-family:"Franklin Gothic Medium", Arial, sans-serif;
}
/* for the titles */
h1, h2, h3, h4, h5, h6{
font-family:Rockwell, "Courier New", Courier, Times, "Times New Roman", serif;
}
8. Links should clearly be links (different in some way from the rest of the text).
Many people do this with color but if you want to do it with an underline then DON’T use the underline (text-decoration:underline). Instead use a bottom border. Here is some simple CSS that lets you do this (If you want to add or remove border or change color on the hover then add a separate style for the a:hover{} selector).
a, a:visited, a:hover{
text-decoration:none;
border-bottom:1px solid #990000;
color:#990000;
}
One thought on “Typography Basics”