Flawless Typography Checklist

TThere is no quicker way to spot amateur typography than encountering dumb quotes in place of smart quotes. Smart quotes are always curved or sloped; dumb quotes are straight and vertical. Properly set type never uses straight quotes—they are a remnant of the age of typewriters and their only modern use is for programming. Apostrophes are used much more often than quotation marks, so they tend to be the biggest culprit. You may be able to get away with using dumb quotes in body copy, however, in headlines, they really stand out and look terrible.

Reference the table below and memorize how to type them. To use the keyboard shortcuts on a Mac, press the specified keys simultaneously; on Windows, hold down the alt key while typing the four-digit code on your numeric keypad with num lock activated.

It’s fine to directly type these characters straight into your website without resorting to HTML entities. They are fully supported in the UTF-8 charset, which is used on almost all modern sites (and is the default encoding recommended by the W3C).

Once you learn how to tell the difference between smart quotes and dumb quotes, you will begin to notice them everywhere and it will drive you crazy. Check out my typography cheatsheet for much more comprehensive details, including a FAQ.

AAs with smart quotes, professionally typeset content should use proper dashes. Standard hyphens should still be used for hyphenating words, but not for punctuating breaks in sentences. For that, you have two options: spaced en dashes or unspaced em dashes.

Many typographers and type designers, such as Robert Bringhurst and Erik Spiekermann, recommend spaced en dashes in running text, rather than unspaced em dashes. For many years, I followed this practice as well. However, after writing for several professional publications, I learned that most style guides (American ones at least) require unspaced em dashes, so I decided to make the switch to using em dashes exclusively. If you aren’t following a specific style guide, then the choice is up to you—the important thing is to be consistent with your usage.

“The em dash is the nineteenth-century standard, still prescribed in many editorial style books, but the em dash is too long for use with the best text faces. Like the oversized space between sentences, it belongs to the padded and corseted aesthetic of Victorian typography.” Robert Bringhurst, The Elements of Typographic Style

WWhile apostrophes, quotation marks and dashes are the most commonly misused typographic marks, there are a few other important characters you should take the time to learn to use correctly.

Prime and double prime symbols are used for measurements, such as inches and feet or minutes and seconds. They are different from both straight quotes and proper quotes. Unfortunately, there isn’t a keyboard shortcut to type prime symbols on a Mac (be careful of keyboard shortcuts, such as option + e, that are actually for the similar acute accent character). The only sure way to get true prime marks is to either copy and paste from the table below or else insert directly using the Character Viewer.

To open the Character Viewer on a Mac, go to System Preferences > Keyboard and check the box Show Keyboard, Emoji, & Symbol Viewers in menu bar, then click the keyboard icon next to the clock in your menu bar and select Show Emoji & Symbols.

AAccents—or the lack thereof—can change the meaning of words, so it is important to use these marks correctly when setting type. Be careful of subsetting fonts to remove all non-English characters—oftentimes content will require names and loanwords from other languages that require accented characters. If this occurs, a fallback font containing the correct accented character will be swapped out mid-word, creating an ugly, jumbled mix of fonts.

Reference this chart for a comprehensive list of accented and non-English characters. It includes Mac and Windows keyboard shortcuts, HTML entities and a usage FAQ. Rather than manually inputting HTML entities, it’s a better practice to encode your site using the UTF-8 charset, and then type (or paste) the accented characters directly.

CCopyright and trademark symbols are often used improperly. Trademark™ and registered trademark^® symbols should be set as superscript—if you are using the correct symbols they will automatically appear smaller and at the correct vertical position in most applications. In HTML, registered trademarks need to be wrapped in <sup> tags to appear correctly. No space is needed between trademark symbols and the word.

Copyright symbols should appear inline and are never superscript. Don’t use both the word copyright and the © symbol—only one is needed.

AAs much as I love ampersands, this beautiful symbol is often used incorrectly. It shouldn’t be used everywhere simply as a replacement for the word and. There are specific situations where it is appropriate to use ampersands.

Proper names, such as Johnson & Johnson, should use ampersands. If you are addressing something to more than one person, such as Dear Mr & Mrs Eaves, an ampersand is appropriate as well. Ampersands can also be used in shorthand expressions, such as copy & paste and rock & roll.

MMidpoints—also known as middle dots or interpuncts—are underused in contemporary graphic design, especially on the web. They have been used in typesetting for hundreds of years and are useful for any situation where you need to create separation between words.

Midpoints work much better than vertical bars or bullets for separating items in a horizontal list. Vertical bars hinder readability as they look similar to an uppercase i and normal bullets are much too fat, drawing attention away from the words.

“…the midpoint or small bullet, remains one of the simplest, most effective forms of typographic punctuation—useful today in lists and letterheads and signage just as it was on engraved marble twenty centuries ago.” Robert Bringhurst, The Elements of Typographic Style

PPunctuation marks, such as periods and apostrophes, can often be removed from sentences while still preserving meaning. This results in cleaner, more readable typography and creates a better flow between words.

It’s important to preserve punctuation where it is necessary for meaning. If you abbreviate inches as in, it’s better to place a period after it so it won’t be confused with the word in. A general rule when it comes to abbreviating is to use a period if the word ends prematurely (Prof. Snape) and omit it if the abbreviation begins with the first letter and ends with the last letter (Mrs Eaves).

“North American editors and typesetters tend to put periods after all abbreviations or (more rarely) after none. The former practice produces a text full of birdshot and wormholes; the later can cause confusion. ” Robert Bringhurst, The Elements of Typographic Style

HHeadings and titles in professional writing should either use sentence case or title case. Setting headings entirely in lowercase as a stylistic effect can work in some situations, but in my opinion, often comes across as too informal. Setting paragraphs entirely in lowercase should never be done as it decreases readability.

Sentence case is easy to remember—just capitalize the first letter of the first word. The simplicity of this makes it an appealing option. Title case, on the other hand, has many different rules that vary from style guide to style guide. In general, you should capitalize every word except these: a, an, and, at, but, by, for, in, nor, of, on, or, so, the, to, up and yet. Choose either title case or sentence case and use it consistently.

MMany people were taught in school to add two spaces after a period. This practice is completely wrong. Open any book and you will see only one space between sentences. Adding an extra space became a habit in the typewriter age and has been passed down by teachers ever since. In HTML, extra spaces are automatically stripped out, however, I still occasionally receive emails from people who type two spaces, so this issue still prevails.

There are four visual cues that indicate the end of one sentence and the beginning of the next—the period, the vertical space above the period, the space after the period and the capital letter that begins the next sentence. Adding an additional space is simply not needed. It disrupts the flow of text and adds distracting rivers of whitespace, not to mention being harder to type.

“Use a single word space between sentences… your typesetting will benefit from unlearning this quaint Victorian habit.” Robert Bringhurst, The Elements of Typographic Style

BBoldface is a rather recent invention and beautiful typography has existed for centuries without it. Italics are fully capable of emphasizing words in running text—there is no reason to harshly disrupt the flow of text by bolding words or shouting at your readers by setting type in all caps. Italic type is designed to be the same size and weight as the roman, so it creates a more even paragraph color that is easier to read.

Sans-serif typefaces that feature obliques rather than true italics aren’t usually the best option for setting body copy—obliques are simply a slanted version of the roman design, while true italics are designed to have more of a flowing, calligraphic feel. True italics contrast much better with the roman while obliques oftentimes blend right in, which isn’t what you want when you are trying to add emphasis. Humanist sans-serifs often have true italics, making them a better choice for body text.

“NEVER use CAPITAL letters to accentuate words in running copy. They STICK OUT far too much spoiling the LOOK of the column or page. Use italics instead. If you have to set words in capitals, use proper small caps with or without initial capitals.” Erik Spiekermann

JJust like two spaces after a period, underlined text is a relic of the typewriter age. All modern style guides recommend italicizing the titles of works and publications rather than underlining. On the web, underlines indicate links—not all links are styled with underlines, but it is enough of a standard that people automatically assume anything that is underlined can be clicked on.

PPunctuation that sits in the margins is known as hanging punctuation. The purpose of hanging punctuation is to keep a clean, even edge to the text, rather than having a small indentation wherever there is a punctuation mark.

Unfortunately, there is no easy way to fully enable hanging punctuation on the web. There is a hanging-punctuation CSS property, but browser support is non-existent. It’s possible to fake hanging punctuation by using negative margins, but the negative margin size has to be manually tweaked depending on the specific typeface and it’s only possible to target paragraphs that begin with a punctuation mark such as a quotation mark.

There are JavaScript hacks for hanging punctuation, but they may not be worth the performance hit for such a small typographic detail. My recommendation is to fake hanging punctuation on blockquotes and prominent display text, and then just wait until true browser support is available before implementing hanging punctuation in running text.

“Small punctuation marks (commas, periods, hyphens, apostrophes, asterisks, and quotation marks) have less weight than full-size characters and, when set inside the measure, may create visual indents in the flush vertical alignment. For this reason, you may wish to consider setting small punctuation marks outside the measure in order not to disturb the vertical type alignment. Larger punctuation marks (colons, semicolons, question marks, and exclamation points), which have the same visual weight as full-size characters, are set within the measure. The em-dash, because of its length, is also set within the measure.” James Craig, Designing with Type

BBody text is the first size you should set when you begin your typographic design process. All other type sizes should build upon this number. Choose a large font size for desktop screens—16px is a good minimum, but oftentimes up to 24px is much more comfortable to read. Size depends on the specific typeface—fonts with lower x-heights and higher stroke contrast should be set at larger sizes.

Don’t use the same font size for mobile that you are using for desktop. Users sit back from desktop screens but hold phones and tablets closer to their eyes, much like they hold books. Therefore, font sizes should be smaller on mobile devices. There is nothing more frustrating than trying to read a paragraph on your iPhone that has four words per line. Matching your text size to the default type size of the device is a good guideline to aim for.

MMost websites have paragraph line lengths that are way too long to read comfortably. Probably the majority of sites I feature on Typewolf suffer from this problem. This is especially true on responsive designs where text reflows to match the viewport window.

You should tweak your CSS at different breakpoints with the aim of keeping your line length under 75 characters. It’s not possible to have a perfect 66-character line at every screen width and that is totally fine. In my opinion, going slightly over 75 characters usually doesn’t pose too much of a problem. Reading really starts to degrade once you hit 100 characters per line and it’s not uncommon to see websites using 300+ characters per line. Wikipedia is a prime example—try reading an article on their site in a full-width browser window and you will quickly see how difficult it is for your eye to jump from one line to the next.

“The 66-character line (counting both letters and spaces) is widely regarded as ideal.” Robert Bringhurst, The Elements of Typographic Style

WWeb designers tend to go overboard when it comes to line height. It’s common to see sites that bump up their line height to 1.7 or 1.8, probably with the intention of making their content “more breathable.” All this accomplishes is a poor reading experience.

A value of 1.5 is usually considered the ideal line height (1.5 indicates a line height equal to one and a half times the font size). Line height should be adjusted for other factors, such as line length, font size and x-height of the typeface, however, you should rarely need to go above 1.5.

If you set a line height of 1.5 and it looks too tight, then it is probably because you are comparing your design to other websites with poor typography. Open a book and use that for a comparison instead—1.5 may now even look a little too loose. I usually tend to settle on a line height of 1.45. I’ve seen some sources recommend 1.2–1.45 as the ideal line height, so don’t be afraid to go a little lower than the standard 1.5.

“Some sans serif typefaces, such as Helvetica, may require more line spacing because of their large x-height and lack of serifs. Additional line spacing helps promote a stronger horizontal flow to facilitate reading.” James Craig, Designing with Type

SStroke contrast is the most important design feature to consider when choosing a typeface for body text. Typefaces with high stroke contrast, such as Bodoni, tend to become illegible at smaller sizes as their delicate, thin strokes start to fade and disappear.

Large x-heights help glyphs remain more legible as they have more room to work with in rendering apertures and counters. Apertures are the openings on letters such as the lowercase e (see the image below). A closed aperture on a lowercase c will make it look more like a lowercase o when set small. And small counters begin to fill in and look muddy at small sizes. So open apertures and large counters make letters crisper and easier to differentiate.

Ignore the “rule” that serifs are always the better choice for body text. Neo-grotesques like Helvetica might not read very well, but contemporary humanist sans-serifs, such as FF Meta and Calluna Sans, can be excellent body text choices. Even geometric sans-serifs like Avenir and Proxima Nova can read well. Just look for low stroke contrast, a large x-height, open apertures and large counters and you should be set.

AAs appealing as it sounds to have just a single font file load on your site, in most cases, you will need at least four styles: regular, italic, bold and bold italic. Without these, you will likely end up with faux italics and faux bold throughout your site. Both faux italics and faux bold are more difficult to read—faux italics stick out from the rest of the text and don’t flow the way real italics do and faux bold tends to look blotchy and fuzzy.

That being said, there are cases where it may be possible to save bandwidth and get away with using fewer font files. If you are designing a static site with a minimal amount of content, then you may not need italic styles or even bold for that matter. There are other ways to create typographic contrast besides using different fonts, such as using size, color, uppercase and letterspacing.

In general though, any site that keeps publishing new content will eventually run into the need for italic and usually bold italic as well. You might have a bold header that needs to emphasize a word or a blockquote citation that is styled with bold that needs a book title italicized.

MMost sans-serif typefaces contain obliques rather than true italics. Obliques are simply roman designs that slant to the right, while true italics are redrawn to have more of a flowing, calligraphic appearance. True italics contrast better with non-italicized text, while obliques often blend right in. The point of italicizing text is to make it stand out from the surrounding text, so obliques often fail in this regard. Serif typefaces are almost always drawn with true italics, which is part of the reason they are the classic choice for body text.

Not all sans-serifs contain oblique designs—humanist sans-serifs usually contain true italics as they draw inspiration from the human hand holding a pen. This makes humanist sans-serifs an excellent choice for setting body text, compared to neo-grotesques such as Helvetica and Univers.

SSystem fonts typically are only available in regular and bold, however, Google Fonts has now made font families with a huge range of weights available to the masses. Source Sans Pro, Roboto, Open Sans, Raleway and Lato all come to mind. These days, it’s common to see websites using weights for body text, such as 100, 200 and 300, that were not designed with longform reading in mind.

The 100 weight of Roboto may look refined and delicate on your machine, but on other computers, it can be completely unreadable. Antialiasing varies from system to system and from browser to browser. On Retina screens especially, the lighter weights can appear very faint. A safe rule of thumb is to only set body text with regular, normal, book or, in some cases, medium. In CSS, this corresponds to a weight of 400 or 500.

This isn’t to say that 100, 200 and 300 weights aren’t useful—they certainly are, but not for setting body text. Use the lighter weights for headlines, lead paragraphs and other type set at large sizes.

PPlayfair Display is a beautiful open-source typeface, but under no circumstances should it be used to set body text. Typefaces with Display in their name are designed specifically for display usage at large sizes. At body text sizes, they become extremely uncomfortable to read.

Display faces tend to have higher stroke contrast, tighter spacing and more intricate details, while text faces have simplified features, more even stroke contrast and looser spacing. Text faces are more boring but are comfortable to read. Display faces are designed to attract attention and create emotion, which isn’t what you want for longform reading.

“When searching for good options for long-form text, we need to recognize that we’re asking someone to live with this typeface for an extended period of time. Every eccentricity is amplified when used page after page.” Jason Santa Maria, On Web Typography

II really dig the aesthetic of monospaced type. It has a raw, undesigned feel that can evoke either a typewriter or computer code—vintage or futuristic. Monospaced fonts are pretty popular with designers at the moment and I’ve seen many designer portfolio sites that use monospaced fonts exclusively.

However, as much as I love monospaced fonts, they simply aren’t very readable when used for long stretches of text. Each character is the same width, so the spacing feels awkward and the word shapes aren’t as quickly recognizable. This slows down reading considerably. For longform text, proportional fonts are almost always a better option.

“Tree farms are to forests what monospaced fonts are to real type… Proportionately spaced fonts are easier to read, occupy less space, allow for more expression, and are nice to look at.” Erik Spiekermann, Stop Stealing Sheep & Find Out How Type Works

AA ligature is a combination of two characters in a single glyph. Standard ligatures help keep awkward pairs of letters from colliding into each other, such as the letters f and i. Discretionary ligatures, on the other hand, are a more decorative way of connecting two letters and don’t serve any functional purpose.

It’s up to the type designer to decide which particular ligatures fall under the standard or discretionary categories. Standard ligatures should be turned on for body text as they serve to make the text more readable. Discretionary ligatures should not be turned on for body text as they can be distracting to the reader.

Discretionary ligatures are disabled by default in browsers, so there is nothing you need to do to explicitly turn them off. Not all browsers enable standard ligatures by default, so use the CSS code below to explicitly enable them (along with other OpenType features you should always have enabled).

body {
    font-kerning: normal;
    -moz-font-feature-settings: "kern", "liga", "clig", "calt";
    -ms-font-feature-settings: "kern", "liga", "clig", "calt";
    -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
    font-feature-settings: "kern", "liga", "clig", "calt";
}

TTypefaces designed for body text already have the proper amount of letterspacing built into the font. Adding additional spacing looks weird and makes the type harder to read. Oftentimes body text accidently gets added letterspacing due to CSS inheritance gone wrong—be careful not to add letterspacing to your uppercase headers (which looks nice) and then inadvertently apply that style to your paragraph tags.

Contrary to Frederic Goudy’s famous quote about “stealing” sheep, there are situations where it is appropriate to letterspace lowercase. Small text, such as tiny captions, can sometimes be made more legible with additional letterspacing. And lowercase type used in display settings can look more dramatic with tight spacing—it can even add a slightly retro touch as it brings to mind the tight but not touching style that was popular in the 1970s.

“Anyone who would letterspace lower case would steal sheep.” Frederic Goudy

PParagraphs need room to breathe. Never smush your paragraphs up against other elements. Without ample padding, your body text will give off an uneasy, claustrophobic vibe that feels uncomfortable to read.

Most CSS grid frameworks include a decent amount of margin between columns by default. But if you are coding your own grid, remember to always add in a nice amount of padding.

FFor better or worse, readers on the web tend to skim. Huge paragraphs that look like “walls of text” can be off-putting, making your writing feel unfriendly and impenetrable. It’s usually better to break paragraphs up into smaller, easier-to-digest chunks. This not only makes content easier to skim but makes it much easier for readers to find their place if they get distracted, which happens often on the web.

This doesn’t mean to just use one sentence per paragraph—I’ve seen blog posts that look more like bulleted lists than actual articles. Instead, keep your paragraphs to a reasonable length, which is usually around 2–4 sentences, depending on sentence length.

HHave you ever wondered why books use indents to denote paragraphs while most websites use line breaks? It’s probably because proper paragraph indents were difficult to accomplish with CSS in the early days of the web, so line breaks became the norm. Since then, it has just become a standard for websites. Online readers tend to skim more and line breaks make that much easier.

But just because it is a standard, doesn’t mean you have to follow it. Most people who read your content online have read a book before (hopefully), so a paragraph indent isn’t going to throw them off too much. For longform articles, paragraph indents will make your content read more smoothly than line breaks. Indents also tend to look more classy and old-fashioned, so it could be an aesthetic choice as well.

There is never a reason to use both line breaks and indents—an indent serves to create separation between paragraphs, so if you are already using a line break then the indent serves no purpose.

“Where the line is long and margins are ample, an indent of 1½ or 2 ems may look more luxurious than one em, but paragraph indents larger than three ems are generally counterproductive.” Robert Bringhurst, The Elements of Typographic Style

AAs with line height, web designers tend to go overboard with paragraph spacing. Paragraphs only need enough space below them to let the reader know they are starting on a new paragraph. Any more space than that is distracting and breaks up the flow of reading. White space is important, but you don’t want huge gaps all down your page.

A bottom margin on paragraphs equal to your font size is a good number to start with. Depending on your line height, you may need to adjust that number. For responsive designs, it’s important to adjust the paragraph bottom margin along with font size. Otherwise, you will end up with too much space between paragraphs as the font size gets smaller. Always try to keep the bottom margin roughly equal to your font size at every breakpoint.

SSince the purpose of subheaders is to denote a new section in a document, it makes hierarchical sense for them to be in closer proximity to the paragraph they are introducing, rather than the preceding paragraph.

Having equal space above and below subheaders isn’t that much of an issue, however, there should never be more space below the subheader than there is above. Design elements should always appear closer to other design elements that are semantically related, while unrelated elements should be placed further apart.

CCenter-aligned text recalls wedding invitations, poetry and tombstones—it probably doesn’t belong on the homepage of a SaaS startup. A three column grid with oversized icons at the top and a small paragraph of centered text placed below is a huge design cliché.

Not only does it look lazy and uninspired, but centered text is much harder to read as your eyes have to keep shifting to find the beginning of the next line. Centered text should be used purposefully, not as a default option.

“Centered text is formal and classical, bearing rich associations with history and tradition. Used without care, it looks stodgy, static, and mournful, like a tombstone.” Ellen Lupton, Thinking with Type

MMost books are set with justified text but that doesn’t mean you should set justified text on the web. Good justified type requires careful setting from an experienced typographer and the technology for justification simply isn’t available in web browsers.

Without hyphenation, justified type will have large gaps between words which makes reading difficult. CSS offers some hyphenation control, but it isn’t very robust and is not widely supported by browsers. And manually hand-adjusting type to look better justified simply isn’t feasible on the web like it is in print. In responsive designs, paragraphs are always going to break at different points depending on the viewport. And it’s impossible to tweak dynamic content that is spit out of a CMS to manually remove “rivers” of whitespace.

“In a world of publishing that still relies on templates to make sense of dynamic text dumped out of a CMS, we do little more than cross our fingers for a good result when justifying text.” Jason Santa Maria, On Web Typography

UUppercase type always looks better with added letterspacing. I usually like to say almost always as there are usually exceptions in typography, however, this is one rule where I feel confident sticking with always.

The letterspacing that is built into fonts is optimized for setting type in lowercase. Uppercase type is blockier and more difficult to read, as it lacks the ascenders and descenders that give words their recognizable shapes. Extra spacing makes uppercase letters easier to differentiate and words much more readable. Dramatically increased letterspacing usually isn’t needed—between 0.1em and 0.2em is most often sufficient.

“It is common practice to letterspace capitals and small capitals, which appear more regal when standing apart.” Ellen Lupton, Thinking with Type

AA header set in uppercase with generous letterspacing can look classy and sophisticated. However, if that header starts to go beyond one or two lines, then it quickly loses its sophistication and just becomes a pain to read.

The ascenders and descenders in lowercase letters help words form distinctive shapes that allow readers to quickly recognize words without needing to read each individual letter. When set in uppercase, type loses these shapes and instead forms generic rectangles that make recognizing word shapes impossible. This leads to a slow and frustrating reading experience.

“When we read longer text, we don’t look at individual characters; we recognize whole word shapes and see what we expect to see.” Erik Spiekermann, Stop Stealing Sheep & Find Out How Type Works

MMonospaced fonts are made up of characters that all occupy the same width. They have no built-in kerning because no kerning is needed. Type designers design the letters to fit properly with default spacing. Adding any kind of letterspacing or using optical kerning looks odd and ruins the monospaced effect.

The same concept applies to connected script faces. They are designed to have connecting letters, like a hand writing in cursive. Type designers spend many hours tweaking every letter combination to make the connections seamless. Adjusting the spacing completely messes up this handwritten effect.

CContrary to Frederic Goudy’s famous quote about letterspacing lowercase and doing things to sheep, there are in fact situations where it is considered good practice to letterspace lowercase. Small text can oftentimes be made more readable by increasing the space between letters.

The default spacing that is built into fonts is usually optimized for normal text sizes, so once text gets too small the letters can start to feel a little cramped. Adding a slight amount of letterspacing can make the letters more distinct and the words easier to read.

All of this begs the question, though, why are you using that small of a font size in the first place? It’s always better to simply increase your font size so it doesn’t need letterspacing. However, in the rare situations that require small type, increased letterspacing should be considered.

“…smaller text sizes require slightly more open spacing.” James Craig, Designing with Type

FFaux italics and faux bold are extremely common on websites. Almost every time I notice that a font looks fuzzy and poorly rendered, it’s because of faux bold. If you load just a single font file on your site, then there is a good chance this will happen to you.

Without an italic style or bold style present, browsers will automatically create their own interpretations—italics will be crudely skewed and bolds will become blotchy blobs. If there is any chance you will need to italicize or bold text (and there mostly likely is), then you need to load the appropriate font styles.

“We call these pseudo or faux italics and bolds, and they’re the typographic equivalent of mistakenly tucking your shirt into your underwear.” Jason Santa Maria, On Web Typography

SSmall caps are capital letters that are specially designed to be used within running text. Their cap height is equal to (or a little taller than) the x-height of the lowercase letters. Small caps create a better reading experience compared to regular uppercase letters because they blend in and flow with the rest of the text. Regular uppercase letters jump out and yell, creating undue emphasis on words such as acronyms.

Pseudo small caps are fake small caps that are automatically generated by the browser. Real small caps aren’t simply capital letters that are scaled-down—instead, type designers create them from the ground up to match the weight and proportions of the lowercase. If you try to apply small caps to a font that doesn’t include them, ugly pseudo small caps will be the result.

Small caps are either built into font files as OpenType features or else included in a separate small caps font file. Loading a separate font file just to implement small caps may not be worth it on the web. I tend to only use OpenType small caps on my sites. This is the CSS code that I use (it will transform both lowercase and uppercase letters into proper small caps, which is usually what you want):

.small-caps {
    -moz-font-feature-settings: "c2sc", "smcp";
    -ms-font-feature-settings: "c2sc", "smcp";
    -webkit-font-feature-settings: "c2sc", "smcp";
    font-feature-settings: "c2sc", "smcp";
    letter-spacing: 0.05em;
}

“Software creates pseudo small caps by shrinking down normal caps to the approximate x-height; the resulting letters look starved and sickly because their weights don’t match that of their brethren.” Ellen Lupton, Type on Screen

KKnowing the difference between orphans and widows in typography isn’t important as the official definitions are often completely opposite depending on who you ask; the only important thing to know is that you should try to avoid allowing single words (or short lines) to float by themselves.

The web is a vertical medium that typically doesn’t use pages or columns, however, widows/orphans can still be an issue in headlines and navigation. It looks weird to have a large headline that ends with a single word on a line by itself. An easy solution is to manually insert a non-breaking space (&nbsp;) between the last two words of the headline. This will ensure those two words will always be on the same line together. This is also useful for navigation, as you probably don’t want nav items like About Us to break onto two separate lines.

In general, I don’t think it’s worth using this trick on paragraphs. In today’s world of dynamic content and responsive design, the wrapping of paragraphs is impossible to control. Trying to exert complete control over the flow of type, like in print, will be a losing battle due to the fluid nature of the web. Inserting a non-breaking space here and there in prominent paragraphs, such as a lead paragraph or the copy on your homepage may be worth it, but you will drive yourself crazy if you aim for perfection on every paragraph on a content-heavy site.

There are plugins available that will automatically insert non-breaking spaces between the last two words of paragraphs, however, these plugins can produce unexpected results. Depending on the line length of the paragraph and the word length of the last two words, it can actually make things look worse.

“Not everyone agrees on just how many words constitutes an orphan or widow, but they agree it is not good typography and should be corrected.” James Craig, Designing with Type

WWhen type designers create condensed versions of their fonts, they don’t simply take the regular version and squish the letters in their font design software. Instead, they carefully redraw each letter so the proportions are consistent with the design of the original version. Adjustments are made to the stroke contrast and counters to ensure the letterforms remain legible.

Therefore, graphic designers should never manually distort type themselves. Distorted type loses the fine adjustments that are needed to maintain the integrity of the letters. If you need to make type fit somewhere, always choose a condensed version of the font. If a condensed version doesn’t exist, then either choose a different typeface or make adjustments to the size, weight and letterspacing. Manually condensing a font never looks good. The same applies to stretching, both horizontally and vertically. Typefaces should always be used as they were designed by the type designer.

TTabular figures are numbers that all have the same width—they are essentially monospaced numbers. Many professional fonts include tabular figures in addition to standard proportional figures, which vary in width.

The benefit of tabular figures is that they line up perfectly in vertical columns. This makes numbers in tables much easier to compare as the decimal points and commas all line up. Tabular figures are included in fonts as an OpenType feature. Use this CSS code to enable tabular figures:

.tabular-figures {
    -moz-font-feature-settings: "tnum";
    -ms-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

Older browsers don’t support OpenType font features, so using a system font that includes tabular figures by default, such as Verdana, can be a better option if wider browser support is needed. Or a monospaced font can always work in a pinch, as monospaced numbers are always the same width.

“Tables are set in tabular figures (!): They all share the same width, as do other characters that are used in that context, for example, currency symbols and en dashes.” Erik Spiekermann, Stop Stealing Sheep & Find Out How Type Works

OOldstyle figures are essentially lowercase numbers, while lining figures are their uppercase counterparts. Oldstyle figures are designed to harmonize with running text, as they contain ascenders and descenders just like lowercase letters. Lining figures, on the other hand, stick out from running text and give undue emphasis to numbers, making numbers feel more important than words.

Some typefaces include both oldstyle and lining figures but have lining figures set as the default figures. Usually, this is a conscious decision by the type designer because they think that style better fits the typeface aesthetic or simply because lining figures are more flexible for a wider range of situations.

Oldstyle figures have a tendency to feel old-fashioned (I’ve heard complaints from clients that oldstyle figures look “weird”), while lining figures are what people are more accustomed to seeing. So in some situations, it may be fine to just stick with lining figures, even in text. Here are the CSS snippets to activate oldstyle and lining figures:

.oldstyle-figures {
    -moz-font-feature-settings: "onum";
    -ms-font-feature-settings: "onum";
    -webkit-font-feature-settings: "onum";
    font-feature-settings: "onum";
}

.lining-figures {
    -moz-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

“Within text, figures should be treated like words; they have descenders and ascenders like alphabetic characters and thus form an uneven outline like a word.” Erik Spiekermann, Stop Stealing Sheep & Find Out How Type Works

II remember a time in web design when it was trendy to use light gray text on a white background—the type was soft and subtle but also completely unreadable. Luckily, most designers have matured since then, however, it’s still common to encounter type on the web that could benefit from increased contrast.

Text doesn’t need to be solid black to be readable—it just needs to contrast sufficiently with the background. Contrast can be created from an infinite variety of colors. I’ve seen sites with blue text on a blue background with perfectly readable type, so always focus on contrast, not color.

UUnderlining links has been a convention since the beginning of the web, however, these days it’s fine to use other treatments besides underlines. The important thing is to make your links contrast with the surrounding text. Links should be subtle—bright red links on a white background may be too much—but not so subtle that your users can’t tell they are links.

I tend to prefer a subtle underline on links rather than a contrasting color but either treatment is fine. Here is the CSS code I use for links on this page:

a {
    text-decoration: none;
    border-bottom: 1px solid #f5f1f2;
    box-shadow: inset 0 -4px 0 #f5f1f2;
    transition: background 0.3s ease-out;
}

a:hover {
    background: #f5f1f2;
}

TThe following scenario occurs all too often: A designer creates a pixel-perfect mockup that features white text set on top of a stunning photo. The photo chosen by the designer has a dark area where the white text fits perfectly. The designer touches up the photo to increase the contrast even further, making the type pop out from the background. The client then signs off on the beautiful design and the site is built. A month later, the client decides to add their own photos through the CMS. The text is now completely and utterly unreadable.

It is easy to blame the client for the above situation, but it is really the fault of the designer. Making type readable on top of a photo is extremely difficult, and much more so on a raw photo that isn’t darkened and touched up in Photoshop. The job of the designer is to come up with a solution to this problem before passing the project off to a client.

Always ensure there is sufficient contrast by either creating a nice selection of photos ahead of time (and then not letting the client add their own) or by overlaying a darkened rectangle over the photo directly in the CSS. Or else don’t rely on the text-on-photo treatment to begin with—a nice typeface set on top of a solid color background always looks good. And not only is it more readable, but it saves bandwidth as well.

SStacking letters vertically isn’t common, but if you do encounter this situation then it’s best to set the letters in uppercase. Uppercase letters occupy roughly the same amount of vertical space as opposed to lowercase letters which occupy a varying amount of space depending on the ascenders and descenders. Therefore, it is extremely difficult to create even vertical spacing with lowercase letters.

IIf you find yourself spending a lot of time on kerning, then that is a sign you are using a poor quality typeface. Professional type designers spend countless hours creating kerning tables that correct the space between problematic pairs of letters such as T and y. High-quality fonts will have built-in kerning that should not need to be constantly tweaked by graphic designers.

The only time you should need to adjust kerning is when setting large display type and designing logos. When adjusting the space between letters, it helps to aim for visual balance rather than mathematical precision. One common method is to visualize sand filling between the letters and to strive for an equal volume of sand on both sides. This is a nice trick, however, it unfortunately doesn’t work for all letter combinations.

Large headlines on the web can be kerned by wrapping the individual letters in span tags and then adjusting the letterspacing, however, an SVG may be a better choice if significant kerning is needed. Use the following CSS to enable kerning (along with other OpenType features you should always have enabled).

body {
    font-kerning: normal;
    -moz-font-feature-settings: "kern", "liga", "clig", "calt";
    -ms-font-feature-settings: "kern", "liga", "clig", "calt";
    -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
    font-feature-settings: "kern", "liga", "clig", "calt";
}

“Inconsistencies in letterfit are inescapable, given the forms of the Latin alphabet, and small irregularities are after all essential to the legibility of roman type.” Robert Bringhurst, The Elements of Typographic Style

HHair spaces and thin spaces are commonly used in professional typesetting but seldom encountered on the web. They are useful in situations where a normal space is too wide and no space is too tight.

User interface design elements that use a slash character, such as Login / Register, usually look a little more refined when using hair spaces or thin spaces. Oftentimes, a normal space creates too much separation and a lack of a space makes the words run together, while a hair space feels just right.

HHorizontal navigation with tight spacing between nav items is a common issue I often encounter on otherwise well-designed sites. Without adequate padding, navigation items begin to run together and become more difficult to quickly scan.

This is particularly a problem when there are nav items with multiple words, such as Selected Work, because it’s hard to tell where one section ends and another begins. If there isn’t enough room to fit all the nav items you need without cramming them together, then it’s better to rethink your layout or site architecture.

IIn user interface design, a grayed out visual treatment indicates that an option cannot currently be selected. The same logic should be applied to site navigation—if a user is on the About page, then that navigation item should be grayed out because it is inactive (the user is already on that page so they shouldn’t need to navigate to it).

I encounter many sites that do the exact opposite approach where they “highlight” the current section by dimming the other sections. Doing this breaks design conventions and is confusing to users because it makes the other sections appear inactive. The current section doesn’t necessarily need to be faded or grayed out—it’s fine to use a highlight color or other visual treatment—just be sure to never gray out sections that can be navigated to.

PProper bulleted lists will automatically format text so that it is indented from the bullets. Lists created in HTML and desktop publishing software will have this behavior by default. The issue of text wrapping underneath bullets only arises when bulleted lists are created manually by directly typing bullets, so never create lists that way.

TThe following is an extremely common issue in sidebars and footers that have a vertical list of menu items or article titles: The list of titles look fine when the titles are confined to a single line, but when the titles wrap to two lines—either when a longer title is introduced or on a smaller screen—they appear as separate items. The image below demonstrates the concept much better than words can. In the second example, notice how “European Gray Wolves” looks like a separate article when it really is just the title wrapping on the next line.

The solution to this problem is to increase the vertical padding between list items and tighten the line height. This will ensure that even if the item titles do wrap, they will still appear as separate, distinct list items.

AA display face can look dramatic when set at a large size on desktop screens, however, when that same typeface is viewed on a smaller mobile screen, it can quickly become illegible. Display typefaces feature delicate strokes that appear elegant at large sizes but cause letters to break apart at small sizes.

If you are already loading both text and display versions of a webfont family, then there is no harm in swapping out the display version for the text version on mobile. In your CSS, simply use a media query to set the text version as the headline font family on small screens. Your mobile readers will thank you.

TType that is set light on a dark background is known as reversed type. While reversed type can look elegant and add dramatic contrast to a design, it can also fatigue the eyes of readers when used for long stretches of copy. Therefore, dark text on a light background is usually a better option for setting body text on screens.

That being said, light-on-dark themes are popular in code editors and the user interfaces of design applications such as Photoshop. In design applications, a dark UI can help take the emphasis off the UI and focus it on the visual canvas. And if you are coding in a dimly-lit environment, then a dark theme in your code editor might be preferable as a white background can create too much glare. Having the option to switch between a dark UI and a light UI would allow the best of both worlds.

“Reversed type (e.g., white type on a blue background) looks heavier than positive type (e.g., black on yellow)…” Erik Spiekermann, Stop Stealing Sheep & Find Out How Type Works

TTypography and copywriting are inextricably linked—bad copywriting will lead to bad typography. As a designer, don’t assume that thinking about copy is the job of someone else. The job of a designer is to communicate clearly and that is dependent on clear, concise copy.

If a client provides you with poorly written copy, then you should work with them to improve it. You don’t need to rewrite the company’s mission statement, but you should pore over any copy that is part of the user interface. All unnecessary words should be stripped away. Remove any explanatory text that is obvious, such as Please enter your username and password in the fields below and then click the login button. Don’t treat users like they are stupid—if you find yourself needing to constantly explain how a design works, then that is usually a sign of poor design.

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” Antoine de Saint-Exupéry

BBody text is the heart and soul of typography; therefore, it should be where you begin your typographic design process. Everything else in your design should be built around it. If you begin with your body text, then you won’t be forced to make compromises later down the line—compromises that could lead to poor readability.

AA modular scale is a series of numbers that have a harmonious relationship with one another. A common modular scale for type sizes is 12, 14, 16, 18, 21, 24, 36, 48, 60 and 72. You may notice that the default type sizes in Photoshop are based around this scale. Using a modular scale can help ensure consistency in your typography and can give your designs an underlying sense of harmony.

As someone who is somewhat of a math geek, I have a strong desire to base everything in my designs around numbers. But the more I work with type, the more I realize that this approach doesn’t always work. Every design project (and typeface) is different, so using a generic set of type sizes won’t work in every situation.

Typefaces oftentimes feel like they have a “sweet spot” for body text size, where a size down feels too small and a size up feels too large. If that sweet spot happens to be 19px, then use that size even if it’s not part of your scale. My advice is to begin with a modular scale, and if it works with your chosen typefaces and design restraints, then stick with it. If not, then don’t be afraid to ditch it.

“Typography is not always about numbers. While the crispness of numbers is appealing, what’s important in typography is how something looks and reads. And designing by the numbers may not always get you there.” Jason Santa Maria, On Web Typography

OOne of the core principles of design is contrast and that same principle applies to typography. Type sizes should never be nearly the same size; they should either be exactly the same size or else much bigger or much smaller. The size difference should be large enough to create noticeable contrast.

Without sufficient contrast in type sizes, a design will lose its sense of hierarchy. Level one headers need to be visually distinct from level two headers in order for a reader to make sense of the structure of the content.

One of the benefits of using a modular scale (as described in the previous section) is that it will ensure your type sizes contrast with one another. A modular scale will never include numbers that are too close to tell apart, such 48 and 49. The larger type gets, the larger the point size differences need to be—12px and 14px type is easy to tell apart, but 60px and 62px type looks the same.

“Contrast is, in my humble opinion, the most crucial tenet of graphic design. It instantly forges connections and distinctions between elements and, when used in concert with other tools like a grid, it helps our viewers discern what’s vital, what’s related, and what’s not.” Jason Santa Maria, On Web Typography

AAdjusting font size is the simplest and most direct method of creating hierarchy on page, but it isn’t the only method. Hierarchy can also be created using heavier and lighter weights, italics, all caps and color.

It’s best to begin by adjusting only one parameter at a time. Make subtle adjustments until enough visual contrast is created. There is no need to adjust four parameters at once—that is a surefire way to make your type look obnoxious.

Setting subheaders in letterspaced capitals (or small capitals) is a nice option for creating hierarchy that comes with the added benefit of not needing to load additional weights and styles of a font family. If you set type in capitals, be sure to size the type down—nothing looks worse than giant capitals that scream at the reader.

“When your text is set in a 12 pt medium roman, it should not be necessary to set the heads or titles in 24 pt bold italic capitals.” Robert Bringhurst, The Elements of Typographic Style

MMost articles and blog posts should be able to get away with using only the following levels of headings: an h1 for the article title, an h2 for headers and an h3 for subheaders. If you find yourself needing more headings than that, it may be worth restructuring your content.

Once you go beyond sections and subsections, readers will have a hard time understanding where exactly they are within the page. Conceptually, there usually isn’t a need to nest things that deeply and doing so only adds unnecessary complexity to the page structure. Keep things simple and avoid resorting to h4’s and h5’s.

AA trick I learned from Robert Bringhurst’s The Elements of Typographic Style is to use a slightly lighter font weight as header sizes get larger. This creates a more balanced page and keeps the larger text from overpowering the smaller text.

On the web, this practice is not always feasible as you usually want to limit the number of font weights you are loading. So rather than using a lighter font weight, I like to slightly lighten the color of my headers. A large, bold headline will feel much darker than body text set in the same color, so lightening the color of the headline will create a more even page texture. Color is free on the web, so don’t be afraid to use it.

“For a balanced page, the weight should decrease slightly, not increase, as the size increases.” Robert Bringhurst, The Elements of Typographic Style

AA common mistake of amateur designers is not using a consistent typographic system. Without consistency, a design won’t feel cohesive and will lead to users becoming lost and confused. A well-designed typographic system will only contain a limited number of styles and those styles will be carried throughout the entire design.

A simple example of a typographic system is using one typeface for body text and another typeface for headers. Each typeface is used for a specific purpose. It’s fine to use the same typographic styles for different purposes as long as it doesn’t lead to confusion for the user.

For example, using Futura bold set in uppercase for both subheaders and navigation is fine because it will always be clear to the user what is a header and what is navigation based on the context. Introducing a unique style for every different design element will be overwhelming and is the antithesis of consistency.

Creating a style guide can be helpful for developing this type of system. Document your styles, assign specific rules for those styles, and then don’t deviate from that system. This will ensure consistency across your site and is especially helpful for teams of designers working on the same project.

TTypographers have been using grid systems since the days of Gutenberg. They are an indispensable tool for creating typographic structure. Responsive CSS frameworks, such as Bootstrap and Foundation, are built entirely around grids. It’s rare to come across a modern website that doesn’t use a grid of some type or another.

Baseline grids are another story. A baseline grid is a grid that uses vertical increments derived from the space between baselines of text. This space will give you a vertical rhythm to work with. The idea is to have all design elements adhere to this vertical rhythm and all text line up horizontally across columns.

In print, baseline grids are important for a few reasons. First, printed pages are slightly translucent. As light shines through pages, the text on the next page will be ghosted through to the current page. Text that doesn’t line up will be noticeable and distracting. Second, printed material often makes use of spreads that carry over from the page on the left to the page on the right. Horizontal alignment is crucial in this situation. And finally, text is often set in columns, such as in newspapers, which requires proper baseline alignment for readability.

On the web, baseline grids aren’t as necessary, nor as practical to implement. The web is primarily a vertical medium—readers scroll up-and-down rather than turn pages left-to-right. The web is also a dynamic medium, not a static medium like print. You have to contend with varying devices and screen sizes, inconsistent browser rendering, users overriding default settings, fallback fonts, dynamic content outputted from a CMS, advertisements or other components whose size you have no control over, multilingual sites that use both Latin and non-Latin scripts and numerous other factors that make the web fluid and ever-changing. This makes it extremely difficult, if not impossible, to achieve a perfect baseline grid on the web.

There are CSS frameworks available that will purportedly give you a perfect baseline grid for your type. The ones that I have seen will make your text neatly line up on a vertical grid, but come at the expense of otherwise terrible typography. In order to make columns of text line up, the frameworks inflate the line height to ridiculous proportions, causing more harm than good.

My advice is to focus on getting the fundamentals of typography right (like font size, line height and line length) before worrying about baseline grids. Attempting a perfect baseline grid on the web will end up being a losing battle in most situations and there are probably more important things you can do to improve your typography.

“Unlike the physical page, the web is a fluid medium, and baseline grids seek to reinforce an idealized web where the designer has ultimate control over the reading experience.” Jason Santa Maria, On Web Typography

TText that is referencing an image should always be positioned closer to the image that it is referring to. This is a common issue on blog posts where descriptive text is placed an equal vertical distance between two images and it’s not immediately clear whether the text is referring to the image above or the image below.

Readers shouldn’t need to begin with the top image to figure out which text matches up to it. They should be able to jump in anywhere on the page and be able to immediately tell which image matches to which text based on proximity or other visual cues.

AA common typographic treatment is to place dividers underneath section headings. Structurally this doesn’t make sense, as the divider is creating separation between the heading and the text below that goes with that heading. A divider should serve to create separation between sections, not between headings and the accompanying text.

In running text, this poses less of a problem as it is usually clear when a section ends and a new section begins. However, in other layout situations, such as grids or lists of items like in a restaurant menu, it’s better to always adhere to this rule.

NNumerous online articles on typography, as well as Robert Bringhurst’s The Elements of Typographic Style, recommend hanging bullets in the margin. The idea here is to create an even margin for the text, just like with hanging punctuation, as described earlier.

Before setting bullets this way, I think it is important to understand that this is a very uncommon practice, even in print. I own many typography books and the only one that sets bullets this way is Bringhurst’s. That isn’t to say you shouldn’t use hanging bullets, just realize that there are tradeoffs.

Hanging bullets will create an even text margin and won’t break up the flow of your text. This could be a good thing or a bad thing, as it could be argued that bullets are meant to break up the flow of text. Indenting bullets also creates a hierarchy, which can be useful, especially with nested lists.

I think it is important to make your own decision as to what works best in your situation. Just don’t think that you aren’t being proper if you don’t hang your bullets in the margin.

TThis is a concept that kind of blew my mind when I was first learning about type. I had assumed that letters had a level of mathematical precision to them. Especially geometric typefaces that are based on circles and squares. The reality is that almost nothing in type relies on perfectly even numbers—everything that appears equal is essentially an optical illusion.

Round shapes are made taller than flat shapes in order to appear the same height. This is because only a tiny portion of the round shape touches the top and bottom boundaries, and the rest curves away. To feel optically equal to the human eye, the round part needs to be slightly extended. Pointed shapes, such as the apex on the letter A, need to be even taller since they fall away from the top boundary much more abruptly than round shapes. Typeface designers use these optical “tricks” everywhere in order to make letters appear balanced.

Therefore, attempting to rely on perfectly even numbers when laying out type is futile as nothing is perfectly even to begin with. Always rely on your eye and go with what feels balanced. Measuring exactly in pixels will lead to a layout that feels unbalanced when it comes to actual human perception.

“A dot set in the center of a square may be located in the true center, but to look visually centered, the dot must be raised slightly above true center. The same principle applies to a line of type, or the crossbar on the cap H, or any image you want to center. There should always be fractionally more whitespace below the image than above.” James Craig, Designing with Type

TThis is a rule that I think is fine to break in proportion to how experienced you are working with type. If you are a beginner, then sticking to just two typeface families will probably yield better results. If you are an experienced designer, and a project calls for it, you may be able to get away with using three typefaces or even more. I’ve seen sites that use seven different type families effectively.

But in general, the more typefaces you use, the less cohesive your design will feel. And on the web, that also means more loading time for your visitors. Choose a typeface for body text and another for display usage and you should be all set for most projects.

“In my experience, the more typefaces I use in a design, the weaker the design becomes.” Jason Santa Maria, On Web Typography

AA superfamily is a group of typefaces from different genres, such as serif and sans-serif, that are designed to work together harmoniously. The typefaces are built from the same skeleton and share similar characteristics. Using a superfamily takes the guesswork out of pairing typefaces, as you know the families will always complement each other.

Popular examples of superfamilies include FF Tisa + FF Tisa Sans, Calluna + Calluna Sans, Freight Text + Freight Sans, Adelle + Adelle Sans, FF Meta + FF Meta Serif, ITC Officina Serif + ITC Officina Sans, FF Scala + FF Scala Sans and Fedra Serif + Fedra Sans.

Most sans-serifs that are part of superfamilies fall into the humanist genre. This is because readable text serifs are usually humanist designs, so they require a humanist sans to pair with. The one exception I can think of is Mrs Eaves—it contains both a humanist counterpart, Mr Eaves Sans, as well as a geometric counterpart, Mr Eaves Modern.

II feel like this is the one type pairing rule that all designers know, but then go on to break a little too willingly. Rules in typography are meant to be broken, but this rule is usually broken for the wrong reasons…

A designer may set headings in Futura, and then, realizing that Futura isn’t ideal as a text face due to its low x-height, will set body text in a neo-grotesque like Helvetica, or even worse, a humanist design like Open Sans. In these types of situations, it is almost always better to set body text with a serif instead. Almost any serif will look better with Futura compared to another sans-serif. Futura and Helvetica look different enough for the average person to tell they are different typefaces, but they look similar enough to not create any contrast with one another.

If you really want to set body text with a sans-serif for aesthetic reasons in this situation, then it would be better to pair Futura with another similar geometric sans-serif that is more ideal for running text, such as Proxima Nova or Avenir. Or even just setting body text with Futura might be an option if there isn’t a lot of copy. Just always think twice before pairing two sans-serifs, even if you think you have a good reason.

TThe above rule about avoiding pairing two sans-serifs applies equally as well to serif typefaces. Serifs typically do not provide enough contrast with each other when paired. You would almost always be better off introducing a sans-serif rather than attempting to pair two serifs together.

“I would avoid pairing two serifs like Caslon and Baskerville, because they share too many traits. Placing them in the same design wouldn’t yield any advantage, as most people wouldn’t be able to tell them apart.” Jason Santa Maria, On Web Typography

TTypefaces that were designed by the same hand often pair well together. Type designers often have preferences for how certain shapes are drawn or for certain proportions. These characteristics may come across subtly in all of their typeface designs, and therefore can add an underlying sense of harmony when the typefaces are paired together.

MMany designers understand how contrast is the most crucial aspect of graphic design, but let that concept fly out the window when it comes to pairing typefaces. Design elements should either be consistent or should completely contrast. Typefaces are no different.

The worst way to combine typefaces is to choose two fonts that look kinda the same but not really—this middle ground where things look different enough to be noticeable but not different enough to be immediately noticeable. In these types of designs, something will just feel off and unsettling.

In the image below, Proxima Nova and Freight Sans land in that middle ground, where they neither harmonize nor contrast. There would be no benefit to using both of these fonts in a design. It would be better to either just stick with one font or choose another font that adds contrast.

“Consistency is one of the forms of beauty. Contrast is another.” Robert Bringhurst, The Elements of Typographic Style

PPairing typefaces that “harmonize” isn’t super practical advice, so I wanted to go into a little more detail about what exactly that means. The easiest way to find harmony is to consider whether a typeface appears mechanically constructed or written by a human hand.

Futura and Bodoni are often mentioned in typography books as a classic pairing, so I will use those two typefaces in this example. But before we try pairing Futura with Bodoni, let’s try comparing Futura to Garamond…

Futura is a geometric sans-serif, so its forms are based off circles. It looks like someone constructed it using a protractor. Garamond, on the other hand, is a humanist serif and looks like someone drew it by hand. Garamond feels organic while Futura feels precise. The oval inside the o of Garamond sits at an angle, which mimics a hand holding a pen at an angle, while the o of Futura sits perfectly upright and straight. This angle is known as the stress of a typeface.

Let’s now compare Futura to Bodoni, which is a Modern or Rational serif. Notice how Bodoni has a perfectly vertical stress just like Futura. This vertical stress makes the letterforms appear exact and symmetrical. These shared characteristics reminiscent of mechanical construction create harmony between the two typefaces. Use this concept of constructed versus handwritten to guide you in finding harmonious pairings.

GGeometric sans-serifs have letterforms that are based off geometric shapes like circles and squares. They tend to feel cold and mechanical. Modern serifs share many similar traits—they feel constructed rather than handwritten and have symmetrical forms. This similar aesthetic makes geometric sans-serifs and Modern serifs ideal partners.

Many Modern serifs, such as Bodoni and Didot, make poor body text choices due to their high stroke contrast. When using a Modern serif for body text, always ensure the letterforms don’t break apart at small sizes. Contemporary geometric sans-serifs, such as Avenir and Proxima Nova, can actually read quite well for body copy, so don’t be afraid to set headers with Modern serifs and use a geometric sans for the body.

“Most Rational typefaces are drawn, not written, but their origins still come from the pen.” Stephen Coles, The Anatomy of Type

TTransitional serifs sit in between the calligraphic Old Style serifs and the symmetrical Modern serifs, with more stroke contrast than the former but not quite as much as the latter. The first sans-serifs were known as grotesques and they share a similar structure with Transitional serifs.

When paired together, grotesques and Transitional serifs tend to evoke a classic, early twentieth-century newspaper feel. Transitional serifs make for excellent body text faces and grotesques—especially gothics which are often condensed—work well for headlines.

“The characteristics of Grotesque typefaces are similar to those of the Transitional and Rational serifs: regular proportions, relatively static forms based on the oval, and fairly closed apertures, with some strokes turning inward.” Stephen Coles, The Anatomy of Type

NNeo-grotesques are an evolution of the classic grotesque model, with more precise, even forms and with terminals that are usually perfectly horizontal. The straight terminals of neo-grotesques harmonize well with the sturdy, blocky serifs in slab serif designs.

There are three main types of slab serifs: humanist slabs, grotesque slabs and geometric slabs. Neo-grotesques tend to pair well with all three varieties, however, pairing up slabs with their sans-serif counterparts (such as humanist slabs with humanist sans-serifs) is always an option as well.

“[Helvetica] is useful for logos and graphic display type, where consistency is desired, but not as effective for long passages of text, where dynamic rhythm and unique lettershapes are vital.” Stephen Coles, The Anatomy of Type

OOld Style serifs have their roots in calligraphy and their forms are derived from a human hand holding a pen, hence the label humanist. Likewise, humanist sans-serifs share a similar human touch. The design of humanist sans-serifs can vary quite a bit, however, their organic, calligraphic qualities always make them ideal for pairing with Old Style serifs.

Although serifs are the more traditional choice for body text, humanist sans-serifs usually read quite well for even long passages of text. Don’t be afraid to mix things up and set headings in an Old Style serif and use a humanist sans-serif for body copy.

“The first roman typefaces following centuries of handwritten forms, Humanist serifs have close ties to calligraphy.” Stephen Coles, The Anatomy of Type

NNeo-humanist sans-serifs are a contemporary evolution of the humanist sans-serif model, with designs that feature an even larger x-height and apertures that are opened even more. The label contemporary serif covers a wide spectrum of newer serif designs, but they share in common a renewed focus on functionality and readability. These two new typeface genres make for a perfect pair in modern typography.

The FontFont foundry (typefaces that begin with FF) was a leader in bringing about these new styles of typefaces. Both neo-humanist sans-serifs and contemporary serifs work equally well for text and are also ideal for user interface design due to their highly legible and functional nature.

“The ideas in FF Meta, along with the FontFont label [Erik Spiekermann] co-founded, ushered in a new genre of sans serifs that exemplify digital typography.” Stephen Coles, The Anatomy of Type

JJust as there are death metal/jazz fusion hybrid bands, there are typefaces that don’t fit neatly into a single category. Caslon is sometimes labeled Old Style and other times is considered the first Transitional face. Typeface classifications are imperfect. Therefore, rules that rely on pairing certain styles of typefaces with other styles, will only get you so far.

So much in typeface pairing comes down to what the designer is trying to accomplish. Many different colors pair well with blue and many different styles of typefaces pair well with Helvetica. Almost any two typefaces can be paired together successfully given the touch of a skilled designer and the proper context. The rules above are merely suggestions and should only be viewed as a nice place to begin the type pairing process.

“Scholars and typographic associations have been inventing new classification systems for nearly 100 years. Still, all of them are fraught with contradictions and controversy. These diverse bundles of letterforms simply have too many subtle variations and too few constants.” Stephen Coles, The Anatomy of Type

IIn some typeface designs, the lowercase l and uppercase I look identical. This is more of an issue with sans-serif typefaces, as the addition of serifs makes letters easier to differentiate. In running text, having letters that look the same isn’t much of an issue as the surrounding words help to add context, which makes things more obvious to the reader. However, in user interface design, where a single word may be isolated, problems with legibility may arise if characters look too similar.

Neo-grotesques like Helvetica are usually the biggest culprits when it comes to containing glyphs that look the same. This is due to their monotonous, static structure. Humanist sans-serifs are often a much better choice for UI design. Their letterforms are more dynamic and they are more likely to contain a lowercase l with a curved tail or angled terminal which helps visually separate the letter from the uppercase I.

“Some characters are easily confused with each other. A figure 1 looking like a lowercase l and a capital I are major offenders.” Erik Spiekermann, Stop Stealing Sheep & Find Out How Type Works

NNewspapers have been setting headlines in condensed sans-serifs for well over one hundred years. Condensed typefaces are advantageous for headlines as they can fit more words per line compared to a standard width typeface. This allows type to be set at a larger size while giving more control over any potentially awkward line breaks.

Although not as popular as sans-serifs, there are serif typefaces that are available in condensed widths that could work equally well for setting headlines. Some typefaces even come in widths that are narrower than condensed, such as extra condensed and compressed. These can be useful in situations where space is particularly tight.

IIf you decide to refresh a design with new type, don’t make the mistake of assuming you can simply swap out one font for another and then call it a day. Actual type sizes vary widely between fonts—type set at 21px can look huge in one font but tiny in another, even though the pixel sizes are the same.

In the image below, Merriweather and Mrs Eaves are both set at 21px with a line height of 1.5. Merriweather appears much, much larger and the line height feels too tight. Mrs Eaves feels tiny in comparison with a line height that is too loose. Manual adjustments to the font size and line height will need to be made.

IIt’s easy to not take your CSS font stacks seriously. I know I am guilty of this sometimes. When testing, you always see the correct fonts, so the fallback fonts aren’t always given a ton of thought. This can lead to issues you may not have considered.

Webfonts don’t always load properly, especially on spotty mobile connections, so choosing fallback fonts that are as close of a match as possible will help to maintain the intended layout. Even if webfonts load properly, there are instances where a fallback font may rear its ugly head. If an accented character is used but not supported in your font, a fallback font will be used in its place.

Finding a default system font that is a close match isn’t always possible, so at the very least, specify a fallback font that is in the same general category, such as serif or sans-serif.

“When a browser needs to render a word and your font doesn’t support the needed characters, the browser will cascade its way through your CSS font stack until it reaches a font that does, or worse, it will display the notdef character: an empty rectangle. This happens most often with special and accented characters.” Jason Santa Maria, On Web Typography

BBy low-quality fonts, I don’t mean Comic Sans and Papyrus (the creator of Comic Sans is actually an experienced type designer with a master’s degree in Type Design). I’m referring to fonts that are created by amateurs rather than type designers. There is now software available that allows anyone to create a font, often in a matter of minutes. Professional type designers spend years honing their craft, where they learn countless subtle techniques for designing optically balanced letters.

A quick way to spot poor type is to look at the kerning. Any kind of uneven or inconsistent spacing between letters should be a red flag. Low-quality fonts may look decent in type samples created by the designer, but will fail in real world design projects. This is especially true when it comes to setting body text. Poorly designed fonts will not read well and will appear muddy and illegible at smaller sizes.

II have heard rumors that a well-known type foundry has a full-time lawyer on staff whose sole job is going after people who use their fonts without a proper license. And that the cases are almost always settled outside of court for undisclosed sums of money, so no one is really hearing about it every time this happens.

If you use pirated fonts, there is a good chance you will get caught. Especially when it comes to webfonts. It’s common for foundries to require the purchaser to specify what domain the fonts will be used on. Therefore, it is easy for them to tell when a font is used on a domain that isn’t registered in their system.

I’ve seen many designers being publicly called out on Twitter for illegally using fonts on their sites. Stealing fonts will make you look like a scumbag, which is not the type of reputation you want as a designer. Type designers deserve to be compensated for their hard work, so make the right decision and always properly license the fonts you use.

TType is beautiful. A large headline showing off gorgeous letters drawn by a skilled type designer can make an entire design. Using huge type almost feels like cheating because it is so easy and it works so well.

Most of the sites I feature on Typewolf make use of huge type in some form. If you are using up bandwidth to load a webfont, then use it to your full advantage. There is no point in using webfonts at such small sizes that the type becomes indistinguishable from Times New Roman. Show off the beauty of your type.

“Other people look at bottles of wine or whatever, or, you know, girls’ bottoms. I get kicks out of looking at type.” Erik Spiekermann, Helvetica (film)

AA common issue I see with brand names, more so with side projects than big companies, is using capitalization in an awkward or inconsistent manner. For example, referring to Typewolf as TypeWolf or Type Wolf rather than Typewolf. Always choose a capitalization style up front and then use it consistently.

If your brand name is two short words, I think it is better to push the words together to form a single word and then only capitalize the first letter. This creates a stronger brand as you are essentially creating a new word. This is the way most established brands tend to do it. It also looks visually awkward having a brand name with a letter in the middle capitalized.

It’s generally a bad idea to style your brand name in all lowercase (typewolf) or all uppercase (TYPEWOLF). This kind of stylistic treatment is fine within logos, but when you write out your brand name it’s better to just capitalize the first letter. The reason is that not everyone who mentions your brand is going to perfectly follow your specific capitalization style. It’s common for publication style guides to require brand names to always be capitalized, so it will never be followed everywhere, which will lead to inconsistency with your brand.

TThe specific letters that make up a logo should play a huge role when it comes to selecting which typeface to use. Some typefaces will include a distinctive letter or two that really defines the typeface and makes it unique. These types of distinctive letters can work well when it comes to logo design.

Domaine Display, the typeface I use for the headlines on Typewolf, contains a distinctive lowercase a and r. Unfortunately, the Typewolf logo doesn’t contain those letters, so I went with a different typeface. The typeface Romana includes a unique lowercase f with a prominent “notch” in it, so I felt that was a better choice as it made the Typewolf logo stand out more.

SSome typefaces include additional character designs that you may not even be aware of. Swashes are ornate, exaggerated letters that are often used to begin or end a word. Discretionary ligatures are two letters that connect to each other but are done so in a decorative rather than pragmatic fashion like standard ligatures. Stylistic alternates are styles of letters that can be turned on or off—sometimes they are fancy versions of normal letters and other times simply a lowercase a that changes from a double-story design to a single-story.

These types of special letters are useful in logo design as they can immediately transform plain, boring type into something memorable and unique. They should be used with restraint, though—swashes are fun to play around with but can quickly make wordmarks become fussy and cumbersome. Swashes, discretionary ligatures and stylistic alternates can be accessed via the type panel in most design applications.

TTypefaces that are designed for text use are more utilitarian in nature—they are meant to be functional rather than beautiful. Display faces, on the other hand, are designed to look refined and elegant. They tend to have more dramatic stroke contrast, tighter spacing and more finely detailed features compared to the simpler and sturdy construction of text faces.

Some type families include both text and display versions. If there is a display version available of your typeface, then use it for headlines and other large type. This will give your designs a greater emotional impact. Display typefaces will usually have the word Display in their name, but they may also go by Headline, Banner, Poster, Big, Titling or Fine.

AA discretionary ligature is a fancy way of connecting two letters, while a swash is an ornate, decorative version of a single letter. Not all typefaces contain discretionary ligatures and swashes, however, for those that do, enabling them for headlines can give your type a more dramatic look.

Use the CSS code below to turn on discretionary ligatures and swashes (along with other OpenType features you should always have enabled).

.headline {
    font-kerning: normal;
    -moz-font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
    -ms-font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
    -webkit-font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
    font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
}

TThe standard line height of 1.5 is considered ideal for setting body text, however, for headlines and other large type, it is way too much. It’s common to see sites that use 1.5 across the board for all type, which leads to headlines with huge gaps between the lines.

The larger that type is set, the less of a line height it needs. Begin with a line height of 1.0 and work your way up from there until your headlines look good. There shouldn’t be a large gap between lines but neither should the spacing be so tight that the ascenders and descenders touch.

“A short burst of advertising copy or a title might be set with negative leading, so long as the ascenders and descenders don’t collide.” Robert Bringhurst, The Elements of Typographic Style

GGrids create order and structure for type, but they can also lock a design into a rigid and boring layout. Not every element needs to line up neatly in columns that run straight up and down a page. Doing so would create a tedious and unengaging experience for the reader.

Having elements breaking out from the grid makes a layout feel more dynamic and engaging, and triggers a stronger emotional response from the reader. Huge type can span multiple columns, creating dramatic contrast. Oversized images and pull quotes can break up monotonous walls of paragraphs.

Even when breaking out of a grid it is still possible to stay within the confines of a larger grid, so you don’t need to completely throw your grid system out the window. An element can break out of alignment within an inner grid but still fall back into alignment within an outer grid.

“…sometimes the content needs to ignore structure altogether to create specific kinds of emotional reactions in the intended audience.” Timothy Samara, Making and Breaking the Grid

AA lead paragraph is a short paragraph set in a larger font size that opens an article. The purpose of a lead paragraph is to give the reader a quick summary of the story and provide a hook to entice further reading.

Lead paragraphs are useful on the web, as they give readers a bite-sized overview that is easily shareable. It’s common for people to share articles without fully reading them, so a lead can be helpful for those in a hurry. Stylistically, leads are usually set in a larger font size or given a different type treatment, such as bold or italic, to make them contrast with the paragraphs that follow.

OOpening paragraphs often deserve some form of decorative type treatment to help draw the reader in. Two such methods are initial small caps and drop caps. These special type treatments serve to mark a clear beginning to an article and can add a sense of formality.

Initial small caps are the first few words of an opening paragraph that are set with small caps. This is a common treatment used in books and magazines but isn’t used on the web very often. If your body text typeface includes small caps, then this is something you should try experimenting with. Visit this section to learn how to properly implement small caps.

Drop caps have a long history in typography, dating back to the earliest days of typesetting. There is an initial-letter CSS property that can be used for drops caps, however, browser support isn’t quite there yet. For now, this JavaScript solution from Adobe is probably the best option.

IIn type design, it is sometimes said that the negative space inside and between letters is more important than the actual letters themselves. Empty space is itself a design element that should always be given proper attention.

Everything on the internet is cluttered and loud. Having a clean, open layout will immediately make your design stand out and feel like a breath of fresh air. Whitespace draws readers in and invites them to read your content.

“90 percent of design is typography. And the other 90 percent is whitespace.” Jeffrey Zeldman, The Year in Design

SSometimes I feel like a better name for Typewolf would be Colorwolf. Most of the sites featured make profuse use of color—plain black and white sites are rare. The impact that color has on type cannot be overstated.

Color feels special. It makes a design feel like a brand. Using black text on a white background is easy; using color is difficult. It requires thought and experimentation, which is what design is all about. Black and white websites can look elegant, but more often than not, they look like an undesigned, default choice. There is a nearly infinite spectrum of colors available, so there is no need to settle on a generic color choice that makes your site look exactly like every other site on the internet.

“Color is free on the web. While there’s nothing wrong with black text on white, using different colors not only adds a bit of drama to the page but also creates hierarchies for the content.” Erik Spiekermann, Stop Stealing Sheep & Find Out How Type Works

IIf for some reason, out of the nearly infinite spectrum of colors, you happen to decide on black and white as the perfect color choices for your design, then there is still little reason to use pure black and pure white. By pure black and white, I’m referring to #000000 and #ffffff, respectively.

These colors don’t really exist in the natural world. Blacks absorb the colors around them, so what we perceive to be black is actually a darkened shade of a color. In painting classes, they teach you that shadows aren’t really black and that clouds aren’t really white. Everything in nature takes on the subtle hues of the surrounding colors.

On screens, using pure black text on a pure white background is harsh on the eyes. Contrast is good, but too much contrast on screens can fatigue readers. A subtle touch of color on backgrounds and text will greatly enhance the reading experience.

SScreen-based design is definitely the future, but offline mediums aren’t going away any time soon. Clothing, packaging, and yes, even books and magazines are still a part of our everyday lives. It’s common to see companies invest years in developing a strong brand identity in print, but then completely abandon that identity when it comes to their web presence.

Webfonts make it possible to translate nearly any typographic identity to the screen. If a brand is using Gotham in print, then there is no reason to settle for Helvetica on the web. Using type consistently across every medium will create a much stronger and more cohesive brand identity.

TThis is the final item in this list and the one that I feel is the most important. We have reached a point in web design where almost every website looks exactly the same. If you cover a site’s logo and just look at the body text, you will have a hard time telling one design from another.

There is nothing wrong with standards and established best practices. However, there is also no reason that websites need to look exactly alike. Typography offers a myriad of ways to make your design stand out and not look like every other site on the internet.

There are thousands and thousands of webfonts available, yet we seem to see only a small handful used over and over again (I wrote an article entirely about this topic if you are interested in learning why this happens). Simply using a typeface that isn’t used very often can be enough to make your typography distinctive. Using a subtle background color or a unique header color can accomplish the same thing.

There are near infinite possibilities when it comes to type choices. When designing, experiment with many different fonts and font combinations—don’t just pick something you are familiar with and go with it. Strive to do something unique, no matter how subtle. If a reader can tell they are reading your content from just a quick glance at your body text, then you are doing it right.