Typography
Why We Should Care about Typography
Good typography is invisible, and bad typography is painfully visible.
There is no "right or wrong" with typography, merely degrees of appropriateness.
Typography should express a site's tone, attitude, and personality.
It directly affects communication and Accessibility
There aren't any formal rules, but theres a LOT of options.
Understanding the basics of typography is important to knowing what makes type choices suited or unsuited for websites, and building a personal collection of good fonts to build on and choose from for our work.
Vocabulary
Typefaces are a set of styles for a site's typography, while a Font is the format or type of storage for the type. Typefaces are like songs and fonts are like mp3's.
Icon Font - Have characters filled with symbols, not letters.
EM - A relative unit of measurement equal to your font size.
Contrast - The differences in the thick and thin strokes of a font's letters, as well as the whitespace between and inside them. High Contrast fonts stop readers and get their attention, so are better suited for headlines. Low Contrast fonts make for smoother, faster, more rhythmic reading and are better suited for body copy.
EM Box -
Classifications -
Weight/Style Flexibility - How many different included weights and styles, such as italics and condensed, are included in a typeface. Good for establishing a clear hierarchy of what typefaces go where while keeping overall typography simple. Sites can be built on a single typeface with lots of flexibility.
X-height - The height of a typeface's lowercase letters from the baseline going to the top of an uppercase letters. A low x-height means lowercase letters are relatively small compared to uppercase ones, increasing contrast. A high x-height means they're similar heights which lowers contrast
Counter - A letter's interior space, enclosed or open. Important for contrast and letter recognizability.
Aperture - The possible opening in a letter's counter. Important for contrast and letter recognizability.
Uppercase/Lowercase Numerals - Uppercase numerals are numbers as tall as a typeface's uppercase letters. Lowercase numerals are generally just as tall as lowercase letters, making them more suited for running text.
Serif - Typefaces with small lines or points at the edges of letters.
Sans-serif - Typefaces without the small lines or points at the ends found in Serif typefaces.
Slab-serif - Typefaces with serifs, but which are blocky instead of pointed.
Tabular Figures - Numbers with fixed spacing, used in tables
Curly Quotes - Punctation, such as quotation marks, that have curls. Correct punctuation for quoted text and dialogue.
Dumb Quotes - Punctiation without curls. Sign of sloppy typography, do not use.
Small Caps - Capital letters slightly taller than the x-height. Made to blend in with lowercase letters for instances like acronyms.
Ligature - Combines two or more characters to make a joined letterform. Good for letters that look bad next to each other, so type remains fluid.
Terminals - Ends of the strokes in letters.
Fallback Fonts - Fonts that render when your webfonts fail to load or are still loading.
Type for a Moment - Content that should only need a moment to read. Typography like this should be punchy, get attention, and look well in large font sizes.
Type to Live With - Type readers spend a lot more time reading, like body copy. Shouldn't be too loud, too high-contrast, or too disruptive.
Ready-mades - Typography with design baked in, like Halloween fonts with blood dripping from them. Avoid them.
Hierarchy - A visual establishment of which items are most and least important. Is defined in many elements than just type size - color, contrast, family, and placement. All must be kept in mind to establish a strong hierarchy.
Composition - How typography works in the larger context of the browser and page design. Some specific factors are the chosen device, physical screen size, screen resolution, window size, browser settings, page layout, etc. Many elements can be controlled but others often depend entirely on the user.
Baseline Grid - A series of rows spun out of the spacing between baselines in text. Made to horizontally all type on the page to make a consistent rhythm and pacing. Is somewhat under debate if they're vital for web typography.
Rivers - Apparent openings and gaps through justified text. Lines of text are a consistent width but the gaps between words form these rivers, which are visually distracting.
General Typography Rules and Principles
It's safer to make your font too big instead of too small.
Create an organized hierarchy for your font. Plan out the contrast, size, color and places for your typeface.
Make sure your typefaces are high-quality, even if they're not free.
Don't use more than one or two typefaces.
When pairing typefaces make sure they're similar enough for good design but distinct enough to create a hierarchy. Pairing a serif and sans-serif typeface can help with this.
Choose one typeface and build on that one choice so the design can scale and stay consistent.
Remember to use white space and spacing so text isn't cramped.
Test on multiple browsers and screen sizes.
Have backup plans in case some or all of your fonts don't load right.
Typefaces for extended reading are best when they have:
Sufficient x-height
Low or medium contract
Dictinct letterforms
Just enough personality
For major type elements, keep in mind how they visually relate to each other in areas such as contrast. There major areas include but aren't limited to:
Big Type, such as headers
Small Type, such as paragraphs
Blockquotes
Interfaces, such as menus
Tables or other presentational elements
When the length of a text line increases, increase its type size and line height. The reverse applies as well.
Classic Typefaces
Helvetica
Garamond
Futura
Caslon
Gotham
Arial
Verdana
Georgia
Good Fonts for Bodies of Text
Georgia
Meta Serif
Chaparral
Droid Serif
FF Tisa
Lucida Grande
Garamond
PT Sans
Merriweather
Roboto Slab
Noto Sans
Good Fonts for Headers
Montserrat
Trebuchet MS
Futura
Titillium Web
Sanchez
Questrial
Lusitana
Radley
Resources
Web Font Loader gives you added control when using linked fonts via @font-face.
Google Fonts are hundreds of free, open-source fonts for expanded your site's typeface selection.
Font Library for helping choose appropriate fonts from Google's large selection.
Fonts in Use is an online archive of current typography examples, and is great for typography inspiration.
Fount lets you identify the font typeface and basic info of any font you see.
Identifont is a large online font directory for finding finds by appearance or name.
FitText is a jQuery plugin for inflating webtype so it's responsive to parent elements.
Lettering is a jQuery plugin for more precist control of type characteristics.
Gutenberg is a collection of starter Sass files for meaningful, organized web typography.
Font-to-Width is a plugin for snugly fitting big type into containers.
Last updated
Was this helpful?