26 Digital Typography Rules for Beginners
The beautiful art of typography is clearly one of the most basic skills every designer should master. After all, it’s one thing that can make or break the design.
The beautiful art of typography is clearly one of the most basic skills every designer should master. After all it’s one thing that can make or break the design.
There are a lot of excellent books written by authors far more experienced than me about every tiny detail of setting type. This huge waterfall of knowledge can be intimidating for a beginning designer, or even an average computer user who wants to keep her/his documents elegant and readable. Are you one of them?
Then great, you’re in the right place to get started. This article is all about the ground rules for young typography apprentices. Here you have 26 of the most basic principles and tips about setting type in the digital age. A small typography tutorial for beginners.
Choosing the Right Font
1. Don’t use fancy fonts.
If you don’t have enough experience or knowledge — don’t use fancy fonts at all. Keep it simple.
2. Trajan Pro is not fancy or old.
It just needs to be used correctly. For now, remember that it’s an excellent, classical and elegant typeface, but it’s not a good match for longer texts.
3. Throw Comic Sans away.
Pretend you never saw it.
Throw Comic Sans away and pretend you never saw it.
4. Avoiding default fonts is bullshit.
Seriously, if someone thinks default fonts are dull, they’re ignorant. It’s the way you’re setting the typeface which determines how it’ll look. Times New Roman can look great. You just need to be more sensitive to pull it off and after all it’s better to set text a little bit dull, than ugly or unreadable.
It’s the way you’re setting the typeface which determines how it’ll look. Times New Roman can look great. You just need to be more sensitive to pull it off.
Mixing Fonts
5. Don’t mix more than two fonts.
It’s a general rule for me. I’m (almost) always trying to use two font families at max. You’re not attempting to make a patchwork quilt, right?
It’s a general rule for me. I’m (almost) always trying to use two font families at max. You’re not attempting to make a patchwork quilt, right?
6. Mix only contrasting fonts.
Sans Serif + Serif, a Script font and a modern one. You need to preserve contrast. Mixing two familiar fonts looks sloppy.
7. But make sure x-height is familiar.
The x-height is the lower case letter height measured from the baseline. You need to choose typefaces with similar heights when mixing. It’ll help you keep a paragraph gray level constant. It’ll also made text easier to read as vision line remains constant.
Setting Text
8. Font size.
Paragraph text used on the web should be at least 13 px. 14–18 px is the best choice for me — It’s not too big and it’s comfortable to read.
Paragraph text used on the web should be at least 13 px. 14–18 px is the best choice for me — It’s not too big and it’s comfortable to read.
9. Choose the right line length.
Care about line length being text size times two. Try to keep your paragraph length between 45 to 75 characters. 66 characters per line is widely regarded as ideal, but it’s almost impossible to keep it this way when it comes to responsive websites. Just try not to make your text line too short or too long.
Try to keep your paragraph length between 45 to 75 characters. 66 characters per line is widely regarded as ideal.
10. Choose leading suited to the text size.
To achieve a balanced setting in a block of text, white space between the lines should be about 150% of the x-height. The easier rule to apply is to set the line height of 125% of text size.
Paragraphs
11. Flush left.
Yes, if you’re not feeling confident when it come to setting custom word spacing right — don’t justify. Just range left. Ragged right is good. It is much easier to read, as your eyes have clear visual points of attachment at the end of every line. You can try justification if you have more than 60 characters in a line. But remember to turn hyphenation on but check manually if it looks good. You don’t want a plague of hyphens to appear.
Ragged right is good. It is much easier to read, as your eyes have clear visual points of attachment at the end of every line. You start to think about justification if you have more than 60 characters in a line.
12. Avoid hyphenation.
Apart from turning hyphenation on when justifying a text — hyphenation should be avoided whenever possible. Try using line break or narrow letter spacing a little. If there’s a plague of hyphens — reconsider measure size or font size. Turn hyphenation completely off when flushing text left.
13. Don’t indent.
Don’t indent first line if the paragraph is preceded by title or subtitle. If you’re making an additional line space between paragraphs — don’t flush. It’s inelegant. From the other hand, If you’re not making the extra space do it. Text indent size equivalent to the line height would be sufficient.
Don’t indent first line if the paragraph is preceded by title or subtitle. If you’re making an additional line space between paragraphs — don’t flush.
14. Captions.
If text needs to be set narrow consider using condensed typeface. Besides it’ll look better, you’ll be able to put more letters on the line making it easier to read.
15. Hanging Punctuation.
Hang the punctuation marks outside the measure. It always looks elegant. If possible try to use them to keep your paragraph edges sharp.
16. Widows and Orphans.
A widow is a single word or a very short line of text at the end of a paragraph. Orphan is a widow that appears on the top line of the following column or page. Avoid it as possible. Try narrowing letter space or line break, reconsider font size, just don’t leave them in your text.
17. Don’t Overuse Word Space.
Shift+enter is sufficient to start a new line. Press the enter key to start a new paragraph. It’s that easy.
Shift+enter is sufficient to start a new line. Press the enter key to start a new paragraph. It’s that easy.
Words
18. Kerning.
If you’re not an experienced designer or you don’t have a great eye for details, just leave it alone, don’t kern manually.
19. Tracking.
Remember, when you enlarge font sizes, the spacing between the letters also grows. When setting up large titles, it’s advisable to reduce font tracking proportionally.
20. Emphasis in text.
For goodness sake, there are a number of elegant ways to emphasize something. Don’t use upper case! As a beginner, you’re unable to set it right. Try using a bold version of the typeface instead.
For goodness sake, there are numbers of elegant ways to emphasize something. Don’t use upper case!
21. Don’t letter space the lower case.
The reason for this is simple: letter spacing lower case hampers legibility.
22. Letter Space Upper Case
Add more letter space between capitals. Readability always benefits from more space between upper case letters, about 10% will work fine.
Add more letter space between capitals. Readability always benefits from more space between upper case letters, about 10% will work fine.
23. Don’t Use all Caps.
Don’t use all caps in text blocks longer than one line of text.
24. Pass on Small Caps.
If you don’t have any real small caps fonts — completely pass.
Letters
25. Don’t alter the widths of letters.
Just don’t. Please.
Numbers
26. Spell Numbers.
In general: Spell numbers, it’s more elegant. This rule doesn’t apply to mathematical related stuff such as equations or percents.
Thank you for reading,
Tom is a Founder and Creative Lead at Hologram , a Senior Web Designer at GOG.com, and a teacher at Envato Tuts+
Read my latest piece about perfect UI design software here
Want to get exclusive updates on my stories and recommendations?
Join my personal mailing list!
