Image for post
Image for post

26 Digital Typography Rules for Beginners

Tom Koszyk
Jul 21, 2015 · 7 min read

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

If you don’t have enough experience or knowledge — don’t use fancy fonts at all. Keep it simple.

Image for post
Image for post

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.

Pretend you never saw it.


Throw Comic Sans away and pretend you never saw it.


Image for post
Image for post

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

Image for post
Image for post
It doesn’t look too consistent. Paragraphs are justified because there are more than 66 characters in line.

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?


Image for post
Image for post
Doesn’t first paragraph look better? Paragraphs are justified because there are more than 66 characters in line.

Sans Serif + Serif, a Script font and a modern one. You need to preserve contrast. Mixing two familiar fonts looks sloppy.

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

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.


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.


Image for post
Image for post

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

Image for post
Image for post

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.


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.

Image for post
Image for post

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.


Image for post
Image for post

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.

Hang the punctuation marks outside the measure. It always looks elegant. If possible try to use them to keep your paragraph edges sharp.

Image for post
Image for post

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.

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

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.

Image for post
Image for post

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.

Image for post
Image for post

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!


Image for post
Image for post
It’s not a readable text…

The reason for this is simple: letter spacing lower case hampers legibility.

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.


Don’t use all caps in text blocks longer than one line of text.

If you don’t have any real small caps fonts — completely pass.

Letters

Image for post
Image for post
It doesn’t look too good.

Just don’t. Please.

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+


Image for post
Image for post

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!

Design in the digital age

Interaction / Product / User Experience / User Interface /…

Tom Koszyk

Written by

Founder and Lead Creative at Hologram: Digital Design Studio. Music addicted typography lover and video gamer. http://www.hologramdesign.co

Design in the digital age

Interaction / Product / User Experience / User Interface / Design

Tom Koszyk

Written by

Founder and Lead Creative at Hologram: Digital Design Studio. Music addicted typography lover and video gamer. http://www.hologramdesign.co

Design in the digital age

Interaction / Product / User Experience / User Interface / Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store