Content reviewed and updated 1 March 2023.
Recently, I came across this series of blog posts about the 33 Laws of Typography, written by Alex Devero, while I was looking for this video by Jill Butler, on the same topic, over on LinkedIn’s Learning feature.
So, cross-referencing the two, I’ve popped them into my own words, which can be found below:
The 33 Laws of Typography
Formatting a document
1) Distrust default software settings
Most of the software you will use is not created by designers, and your needs will vary depending on the type of work you’re doing. As a general rule, make sure to at least control the default settings of your software, as “default” simply means what is best for the majority of users. For example, changing RBG to CMYK colour will affect how a document looks both printed and digitally displayed.
2) Ensure good contrast between text and background
Regardless of the type of document, creating appropriate contrast between text and the background is essential to ensure the text is legible. Additionally, all of us are accustomed to reading black text on a white background, so using light text on a dark background can be somewhat harsh on the old eyeballs. Keep this in mind when designing text, particularly body text. If you are fluent in colour theory, you can use palettes such as analogous, complementary, and compound colours, to create a contrast that’s easy on the eyes.
As an additional note regarding accessibility, some neurodivergent readers (such as those with dyslexia) may find reading black text on white backgrounds difficult, so good practice is to make sure your backgrounds are a light or pastel colour, which still provides good contrast.
3) Avoid chart and page junk
Avoid unnecessary data in charts, graphs, and pages. Too much information at once can overwhelm a user, leading to misunderstandings or misleading connotations. Stick to the information that is relevant and important.
4) Keep a consistent style with a document
Consistency is crucial in making your design work both in form and functionality. A document with too many different typefaces, for example, becomes overwhelming and distracting, as the user’s eyes have to keep adjusting to different letter forms to read what has been written. Stick to a maximum of 2 different fonts – header and body, and a consistent colour scheme with a maximum of 5 well-balanced colours (which will be easier if you’re familiar with colour theory).
5) Maintain a visual hierarchy
Visual hierarchy simply means placing emphasis on elements of importance. Elements with a higher visual hierarchy (bigger text, bolder font, large images) will draw the eye of the reader first, and then as the hierarchy progresses, the eyes are led through the page. A basic example of this is headers and body text – your headers are usually in large, bold fonts, to announce a new topic; then the eyes are led downwards to the smaller body text beneath. Remember to keep these separate elements consistent.
6) Group related page elements together
White space is important for aiding a user in understanding which elements on a page relate to what, and what follows on from where. For example, a page with multiple sections would contain “white space” (which isn’t necessarily white, but is a blank area that provides rest for the eyes) between each, to separate one section from another. Then, within the sections, white space would be used again to separate the headings from the body text – but with less white space than that which separates the sections. Effective use of white space could also allow for sections to be grouped together without the need for headings or separate formatting.
Formatting large bodies of text
7) Set printed body text between 9 and 11 points
When producing typography for print, it is important to remember that print is a static format that, unlike responsive web pages, does not shrink or expand once printed. This is an advantage over a digital display, as it allows for set, hard-and-fast guidelines for formatting your text. A good rule of thumb for body text, when printing, is to set it between 9 and 11 points (0.125 – 0.154 inches; 12px – 15px). Staying within this range means your printed text will always be legible.
On the other hand, working with text for the web means less control over how a user sees and reads your text. A 9pt-sized body of text will be experienced differently on a widescreen laptop than on a handheld smartphone. As such, it is best as a general rule to set text at a maximum of 16px, and a minimum of 12px, used sparingly.
8) Set body text to 2-3 alphabets wide
Line length is another important factor in typography. Bodies of text where the lines are too long can seem long-winded and too wordy, whereas making the lines too narrow can be difficult to follow, and break up the user’s reading flow too much. As such, research suggests that lines of 50-75 characters (including spaces) are optimal. Of course, using your personal judgement and instinct is beneficial in cases of exceptions to this rule.
9) Favour flush-left, ragged-right body text
Always use left-aligned text and never justification, unless you can justify it as a designer to your boss. When used well, justifying text can be effective, but often you will find that the gaps between words become too large, or characters are too close-together to be legible.
When this occurs, the flow of a page is disturbed, and the gaps can distract the user if the fluctuating character spacing becomes conspicuous enough. Additionally, large blocks of justified body text can put a user off, as it can seem overwhelming.
10) Separate sentences with one space, not two
Using more than one space after a period is a waste of space and completely unnecessary. One is fine, and if you don’t think there’s enough spacing after a period, you should adjust the whole body’s character spacing and/or tracking.
11) Don’t allow less than seven characters on a line
In typography, an “orphan” is where a single word is left on a line by itself. This should be avoided at all costs, either by adjusting the paragraph’s margins or spacing, or by adding/removing words to give the orphan some company. Don’t leave fewer than 7 characters on a line. They get lonely.
12) Avoid bad paragraph breaks
In addition to orphans, there is a term for the last lines of a paragraph that has been delegated to a separate page: a “widow”. These widows are another example of bad formatting that a designer should avoid.
13) Avoid line-breaking hyphens
Don’t let the hyphen be the last character of the line. Doing so interrupts the flow of your text and leaves a user hanging mid-word for longer than is comfortable. Make it less off-
putting by bringing the whole word down to the next line.
14) Signal new paragraphs once, not twice
There are two ways that a new paragraph can be signalled or introduced:
A blank line can be inserted between two paragraphs.
The first line of the new paragraph can be indented.
There is no need to use both, doing so simply wastes space and adds nothing to the readability of the document. Save the planet, signal a paragraph once and only once.
15) Break up large blocks of text
Long content can easily discourage users from continuing to read past a certain point, or even attempting it at all. Justifying this text, as mentioned in a previous rule, just accentuates the problem, as does a lack of proper punctuation. Giving the eye space to rest at regular intervals using spacing and proper punctuation instead of allowing run-on sentences such as this one to happen reduces the likelihood of a user losing their place while reading or switching off in the middle of a sentence or paragraph and having to read the whole thing again to retain what they have just read and I don’t know about you but reading this back kind of makes me hold my breath even though I’m not reading it aloud so that’s not particularly comfortable.
A good rule to follow is to start a new paragraph after about five lines, according to Neil Patel.
Formatting smaller blocks of text
16) Emphasize 10% or less of the text
There is a fine line between too much emphasis, and too little. Too much emphasis can cheapen the effect and lose its impact; too little emphasis might mean some important information is skimmed over.
If you are in doubt, use the 10% rule, and only use emphasis on 10% or less of the text.
17) Avoid all caps and underlined text
Typing in all caps can be very DISTRACTING TO THE EYE. CAPS interrupt the FLOW of a sentence, whereas studies indicate that reading lower-case type is easier. In addition, avoid underlined text, particularly in web design, as underlined text is usually indicative of and associated with a link.
18) Set acronyms and initialisms in small caps
To avoid the effects of the above rule, in the case of acronyms and initialisations, set these in “small caps”. These can be found in Microsoft Word, for example, under Format > Font.
19) Hang punctuation in small chunks of text
In the case of small blocks of text, such as block quotes, punctuation should be “hung off” the aligned edge, to prevent accidental indentation of the text. For example, if the first quotation marks are “hung” off the aligned edge, a flushed left side occurs. To do so in Word, simply bring up the rulers in the document, select the text you want to be hung, and then nudge the indentation arrow across to the left.
20) Hang numbers and bullets in lists
- The above rule also applies to lists.
- Luckily, most word processors
do this automatically.
21) Avoid bad line breaks
A line break is a place in a paragraph where the text breaks off
at the end of one line and continues again on the next. With bad line breaks, the
text alignment on the right-hand side of the body text
becomes too ragged, resulting in disruptions in the reading patterns. Try setting them
manually instead of relying on page margins.
22) Use symbols and special characters as needed
Use √ as many symbols ™ and special characters as required ∞ – just make sure they’re HTML-compatible if designing for websites, so users can see them correctly regardless of which browser they’re using.
23) Use proportional old-style figures in the body text
There are several text figures you can use in your designs, which change the lining of numbers within your text. These are: tabular lining, proportional old-style, proportional lining, and tabular old-style. The “lining” figures are of uniform height and alignment, whereas “old-style” figures have varying heights both above and below, and can add some extra interest to the body text in your document.
The terms “proportional” and “tabular” refer to the spacing between the figures. In a proportional font, the space allotted for a number is proportional to its width – for example, the number 1 (sans serif) is narrower than the number 2, so in a proportional style its serif would be shorter, if they exist at all. A 12 would be narrower than a 23. In a tabular style, every figure has the same amount of spacing, and so this style is better suited for situations where vertical alignment is required; for example, in tables.
24) Adjust leading and kerning for large text
Large text will often require extra effort regarding its leading, kerning, and tracking – some fonts that are spaced proportionally can seem messy or difficult to read if scaled upwards. On the other hand, tabular fonts can make the characters seem too far apart. Another example would be in the case of titles and subtitles – depending on how close the two need to be, it might be better to select a “lining” style, as opposed to an “old-style” font.
25) Verify software alignments optically
Software isn’t perfect when it comes to typography and, as rule 1) suggested, don’t trust the defaults. If a font seems off to you, fix it – you are the designer, trust your judgement.
Using punctuation
26) Connect thoughts using em dashes
There are three types of “dash” to use in different situations. The “em” dash, named as such because it is the width of the letter ‘M’, is used in a similar way to commas – to “connect thoughts”. They can also be used to replace parenthesis ‘( )’, and are best used in more informal contexts. Used well, they can add a dramatic flair to a body of text, due to their sudden and attention-drawing effects.
27) Show ranges using en dashes
“En” dashes, once again named for the letter ‘N’ with which it shares width, are used for dealing with numbers; in particular, ranges of numbers, dates, or time. There should not be any spaces beside the “en” dash. Abiding by this rule will make your typography work 99.9-100% better.
28) Clarify and improve readability using hyphens
Hyphens are the shortest of the three types of dash and are used for word division and compound terms. Like with the “en” dash, there should be no spacing on either side of the hyphen.
Using hyphens is a surefire way to show the relationship between 2+ words in a compound phrase, and improve the flow of your sentences.
29) Designate feet and inches with prime symbols
Save space and time by marking units of measurement with symbols, not characters. For example, 3 inches (or 3in) is better marked with a “double quote”, whereas 3 feet (or 3ft) is best marked with a ‘singular quote’. To remember which symbol is used for feet/inches, think of the syllables – one syllable for one quote (3’), two syllables for two quotes (3”).
30) Replace missing characters with apostrophes
Don’t use apostrophes for plural words. Apostrophes should only be used if there is a letter missing, and using apostrophes for plural words immediately lowers the professionalism of your document. There is no need for apostrophes in any of these words – unless they are a noun’s possession.
Choosing typefaces
31) Limit typefaces to two per project
As mentioned previously, keep the number of different typefaces in your document to two – one for headings, and one for body text. If you need any further formatting to further separate text (for example, for captions or headers/footers), remember that typefaces can be made to look rather different by formatting their size, weight, and style.
This free Udemy course offers a great explanation of this, and an easy method to figure out which two fonts to use in any design.
32) Use typefaces that reinforce a document’s mood
Generally speaking, serif fonts are used for formal documents, and sans-serif fonts are used for more informal contexts. Typefaces can be further categorised into decorative, handwritten, slab, script, and blackletter. Each style comes with its own connotations and will affect the mood of the document in a big way – especially if used incorrectly. For example, a wedding invitation will often use a script font to formally invite guests, whereas a quirky shop selling handmade gifts might use decorative fonts to advertise their kooky crafts.
Regardless of the mood of the design, never use fonts like Comic Sans, Papyrus, Jokerman, or Curlz. These fonts have a poor reputation, and use of them screams unprofessional amateurism (plus, some of them are rather illegible) – and even if that’s what you’re going for, don’t use them!
33) Choose serif or sans-serif, based on aesthetics
While the general rule (see rule 32) is that serif and sans-serif can be separated by formality, there may be some cases where an informal design calls for a serif font, and vice versa regarding formal designs. It is good practice to pair serif and sans-serif fonts, using one for a header, and the other for body text. Use your own judgement as a designer.
Any questions or comments? Leave me some feedback!
Georgia Goddard - Artist 
One thought on “The 33 Laws of Typography”