Typography needs moral but mostly aesthetic instructions. Here is a list of 10 Commandments of Typography, rules to follow and tips to know to be a better person, or at least a better graphic designer!
1. You shall not deform
There are so many font families with several weights and styles, so why do you persist in bolding, condensing or small-capsing by hand, guys?
If you need something bold or light, choose a font with several weights, but please don’t just add an outline, you have 99,9% chance to damage the letter design (counterforms, serifs, endings etc).
Same things about widths. We know that designers use to change width manually to save some space (don’t play the innocent). Why don’t you choose a condensed or ultra condensed font? If you simply reduce the width, contrats between verticals and horizontals will be ugly.
If you didn’t know, a real small-cap has a specific design, it’s not only an uppercase which have been reduced. If you shrink an uppercase to fit with the x-height, you’ll damage contrasts (so choose a font with small caps).
See it by yourself :—
2. No more than 2 fonts family you shall combine
Ideally, combine 2 typefaces, (maximum 3) and enjoy all their styles and variations to create contrasts.
For example, choose a serif font and a sans serif font and play with weights, italics, small caps etc.
Avoid to combine two fonts of the same family, and always remember that contrast is the key.
3. Too short or too long lines you shall avoid
The lines lenght considerably influences the reading and the understanding of the meaning itself. Short lines will provoque a jerky reading while too long ones will strain your eyes.
A simple way to calculate the justification is to use the method of Robert Bringhurst, which multiplies the font size by 30. If the font size is 10px, multiply it by 30 gives you a justification for 300px or about 65 characters per line.
4. Good rules of composition you shall apply
The automatic justification of a text can generate some composition aberrations (unequal spaces between words, rhythm problems, unbalanced typographic color…).
So you’ll have to change some settings to get a better color of text.
Justification is about the letters distribution on the lines. You can adjust the space between words and between letters. Hyphenation is about if, how and when words can be hyphenated.
Here are some basic settings for optimized composition (Valentine’s habits, but everyone has its favorite ;). Ideally you have to adjust the settings for each font, depending on its width:
Line breaks are essential too for a good composition.
If you choose to compose a left justified text, you should shape your lines in order to have a beautiful text color. Avoid too short lines and provoque line breaks. Be aware of widows and orphans (see definitions below).
5. Of fake friends you shall beware
The apostrophe should not be confused with the prime symbol (minute). You can get the “real apostrophe” with [Alt Shift 4].
The double quote mark should not be confused with the double prime (second). You can get “english” quote marks with [Alt 3] and [Alt Shift 3]. And «french» quote marks with [Alt 7] and [Alt Shift 7].
As for the ellipsis, you can get it with [Alt .], and not “dot dot dot”!
There are also keyboard shortcuts for œ [Alt o] and æ [Alt a].
6. Accents on uppercases you shall put
We already talked about this here, but the topic is so important that it needs to be part of the top 10 of Type Commandments. Actually no accents on uppercases, it’s like … no accents on lowercases. We don’t need metaphor, we need comprehension!
7. Abbreviations you shall learn
Abbreviations are cute little and practical things to know. Here is a table that shows some English and French practical abbreviations. There are of course many others, that I invite you to learn by heart asap :).
And MM. is not for Mickey Mouse but for Messieurs (and so M. for Monsieur).
—
8. Spaces you shall respect
In French, there is a thin space (espace fine insécable) before every punctuation composed of 2 signs
(?!; etc).
In English, there are no spaces before punctuation. Easy!
9. Fonts you shall respect
Fonts are like baby animals, rare pearls and protected natural species, you must take care of them and show them some r-e-s-p-e-c-t. There are people in the world who spend their days (and often their nights, week-ends, family holidays…) to think, draw, and make fonts. Think of them, respect their work (and lives). And there are fonts on the world wide web that you can buy or get for free, licenses are the keys of possession. Fonts are precious, but not in a Gollum way.
10. This fonts you shall never use
This is not an order, this is just a best friend advice!
Illustrations by Diane Pellotieri.
No. 3? Too Shirt?
Otherwise a nice article, thanks.
Hello Jeffrey,
Thank you for the notice. I have updated the article.
Thanks
great tips! i really enjoyed reading it. But the shortcuts doesn’t work for me. looks like everybody needs a mac book pro for just about everything.
The shortcuts don’t work for me either (and I have a mac book pro, albeit a very old one). Are these shortcuts for British English keyboards? Anything I need to change in some settings?
Was #1 supposed to look like goatsee?
Regarding #6, this is true except for acronyms, the French rule is here : http://bdl.oqlf.gouv.qc.ca/bdl/gabarit_bdl.asp?T1=accent+majuscule&T3.x=0&T3.y=0
THIS. This is amazing! thankyou!
BTW, may I know the names of the fonts used here?
Hello Omran!
Thank you for your enthusiasm!
We used Suzee FY, Liszt FY and Sergio FY for Roman numbers,
they are all available on our shop 😉
For rule #2 you meant to say typefaces, not fonts, right? I think there should be another rule that says you must learn the difference.
Yes indeed we meant typefaces, or fonts family.
do you guys really think papyrus is ugly…….see the avatar poster….they used it well….
Woww guys your post is amazing , i will try to follow ur tips while creating my new website
Je transmets vos conseils bien illustrés à mes étudiants. Il sont vivants et pertinents. Merci de votre beau travail !
Nice article! Just wondering, why does Comic Sans not included in #10? Lol. Anyway, I love this article! Very helpful, thank you!
Thank you very much, it’s precious !
Awesomeness !
Nice one! Didn’t know that French one 😉 but at the 10th point is “Comic sans” missing 😉
Useful and nicely done. You may want to correct the abbreviation for mademoiselle, though, which is actually Mlle.
Hi guys ! Great tips ans illustrations !
I noticed a mistake in VII. It’s wroten “Seconds” two times, one should be “Seconde”.
I share
Oui!! Merci pour ça!
Got to intervene on #8 though: the nonbreakable fine space is indeed to be put before every double punctuation in French… except in Canada (and maybe elsewhere in the world, though I think francophones in West- and Central- Africa and in Asia would use the same rules than in France… but I’m really not sure). En français au Canada, l’espace fine n’est obligatoire que devant les “deux-points”, et pas forcément devant les autres doubles signes de ponctuation (exclamation, interrogation, point-virgule). Autant Wikipédia(!) que l’Office québécois de la langue française sont d’accord là-dessus : http://fr.wikipedia.org/wiki/Espace_(typographie) & http://bdl.oqlf.gouv.qc.ca/bdl/gabarit_bdl.asp?t1=1&id=2039
As well, it could be worth including in that #8 that there’s only one space after periods. Double spaces are common practice on this side of the Atlantic ocean: http://www.slate.com/articles/technology/technology/2011/01/space_invaders.html
I’ll follow your advice. Thanks.
Excellent, original article, and well designed to boot.
Great article, loved it !
I think there’s a tiny typing mistake for the abbreviations. Isn’t it seconde for 2de ? The second second, if you follow me haha
Yes indeed 😉 We fixed it on our blog!
Came across this via TNW. I’ve been turking for some simple, practicle advice on typography. Thank you so much for sharing. And for making it super fun while at it.
Thanks! Merci !
Schade, dass es diese Seite nicht in deutsch gibt.
Thank you very much for amazing comandments! It was a joy to read, illustrations will definitely make it easier to stick in mind.
Hello, I’m teacher and I worked with a group of students on the 10 Commandments of Typography, we added 2 commandments, made new pictures and we made a little book, do you accept that we print this book to use it in the classroom, thank you in advance,
Hello Cécile,
Yes we definitely accept 😉
Thanks,
Arthur
Great !