Working with typography on websites can be fun but can also be a headache if you don’t know at least some basics. We’ll go over some terminology and then basic set up.
Basic Web Typography Terms:
Typeface: A specific font and weight being used. Eg. Futura Book
Font: An entire group of a typeface including all weights, and symbols.
Font-Weight (style): Bold, Italic, Oblique, Book are a few examples of Font Styles.
Size: How big the size of your type is in points.
Leading: Controls how much space is in between your lines of type. If you’re only dealing with one line this doesn’t apply.
Tracking: This is how close each letter is spaced apart from each other it also controls the spaces between words as well.
Kerning: Similar to Tracking but this is the space between only two letters.
X-Height: The height of the typeface not including ascenders or decenders. Generally measured by lowercase letters such as “x”.
Ascender: The part of the typeface that rises above the x-height. Some examples are letters “b” “d” and “t”.
Descender: The part of the typeface that falls below the x-height. Examples are letters “y” “j” and “p”.
Widows: A word that’s on its own line at the end of a paragraph.
Orphans: A group of words that are separated from the rest of the paragraph usually by page break.
Setting up your type:
Depending on the typeface you’re using the kerning may only need a little bit of an adjustment or it may need a lot. When setting up your titles or large web headings its imperative that you check the kerning of the type. For body copy you don’t need to worry about the kerning but more so the tracking. Just make sure letters aren’t cutting in on each other which would make reading harder. Leading is also very important. Not enough leading and type can look like a block or a mess and too much leading can also heed the reader’s ability to decipher what is being said. Different fonts and weights will change the look as well. Some typefaces have different x-heights which can change how much leading you’ll need to provide for legibility. Once you get bit by the type bug you’ll be evaluating type wherever you go.
