33 Laws of Typography Pt3

Welcome back in 33 Laws of Typography series. Today’s part will be the last one, grand final. You are going to learn about how you should use punctuation to your advantage and avoid unnecessary mistakes. You will also learn how to choose typefaces for your project. This is one of the most important skills designer can acquire when it comes to typography. Without further ado, let’s start with laws for punctuation and then continue to typefaces.

How to Use Punctuation Properly

26 Connect thoughts using em dashes

In typography, three options are available for you in most situations — em dash, en dash and hyphen. Today you are going to learn about all them, but for now let’s pick the em dash. The em dash is named after the “M” letter and it indicates its width is equal to the width of letter “M”. When you should use em dash? To simplify it, use it any time when you want to “connect thoughts”. You can use them instead of commas (ems are more empathic).

You can also replace parenthesis with them in less formal and a bit more intrusive context. Keep in mind that dashes draw more attention, so when you are working in more subtle context you might rather use classic parenthesis instead. Another example of switching with dashes are colons. Again, if you want to emphasize something in less formal way, em dashes can be useful.

27 Show ranges using en dashes

Second option, after em dashes, are en dashes. It is just a small detail in width what distinct them, but — as every designer will agree — details are important. In short, en dash is shorter than em dash, but wider hyphens. It stands right in the middle. The en dash has the same width as space. En dashes should be used primarily when dealing with ranges or spans of numbers, dates and time. Both, em and en dashes should not have any space on sides.

Another examples of use can be indication of conflict, direction or connection between words and also compound adjectives. The only reason for this is pure aesthetics. So, feel free to use hyphens for these two situations instead.

28 Clarify and improve readability using hyphens

The last option are hyphens. They are the narrowest in the group. In typography, hyphens are mostly used for word division and compound terms. They can be a useful tool to increase over readability and clarity of the content, but never use them as substitude for em or en dashes. To make sure you are using hyphens correctly, include them in compound verbs, nouns, adjectives and terms, nothing more. This way you will avoid most of mistakes.

29 Designate feet and inches with prime symbols

If you are working with units of measurement like feet and inches, you had better use prime symbols instead of characters. In other words, always go for single and double quotes. However, choose only straight quotes. Single quotes, or minute marks, are mostly used for feet while double, second marks, for inches.

30 Replace missing characters with apostrophes

If you want to skip certain letter in the text, never ever ever leave the space blank. That is not a good habit for increasing your typography skills. Instead, replace it with apostrophe to indicate that missing letter. Otherwise, you might confuse the reader. Even though apostrophes can look like a good idea, there are some situations when they can cause you more harm than good.

To avoid any potential typography faux pas, keep in mind to double-check the context of your content. Formal documents should never use apostrophes to replace missing characters. In formal speech, there should be no missing characters at all. They are often used in slang so it would look bad using them on company’s websites, official documents, cover letters, CV, etc. In formal environment forget skipping characters at all costs.

That’s all for punctuation. Now, let’s take a look at how you can get better in typography through working with typefaces like a pro.

How to Choose Typefaces

31 Limit typefaces to two per project (document)

Number of typeface you use in your projects should not be more than two. That’s it. One or two typefaces and you are good to go. One typeface should be for headings and the second one for body text. This way you will create contrast between them while keeping your design consistent. You can also pick just one typeface and use it for both, headings and body text, but don’t forget to create contrast in another way (padding, color, etc.).

32 Use typefaces that reinforce a document’s mood

Typeface should always reinforce the overall mood of the design or document. This is not only a rule of thumb, but necessity. When design breaks, it is often the typography that needs to be fixed. Do you know that feeling when something is not right? Well, the typeface might be the right choice for that particular project. For example, you would choose different typeface for college website and for tattoo shop. The devil is again in context (environment) and mood of the website.

You should always think deeply about what message do you want to communicate through the website, document or whatever you are working on. Different messages carry various moods and require different typefaces. Another thing is to consider the target audience you are talking to. This is not the owner of the website, but his customers. Think about who they are and don’t skip your research. This will help you in your decision-making process.

33 Choose serif or sans-serif, based on aesthetics

One question causing many headaches is when to choose serif and when sans-serif typeface. If you find it difficult to distinguish between them, remember that “sans” in French means “without”. Serif is that small line at the end of stroke of the letter. To decide which one to choose is to go with your gut. Engage your aesthetic instinct. This is often the way designers deal with typography. They listen to what they feel. Again, think about the context and content. What message do you want to communicate to whom?

You’ve just finished the 33 Laws of Typography series, or crash course if you want. With this, you are now fully equipped and ready for any typography related challenge. In recap, from now you know when it is better to use em dashes and when en dashes and you can use hyphens to increase readability of the content. How to display feet and inches properly. How to deal with missing characters. How many typefaces should you use per project (document). How they should always reinforce the mood of your project and how to choose between serifs and sans-serifs.

Since now, any time when you will feel unsure, just go back to these 33 laws you were learning about. They will provide sufficient foundation for you and cover your back during tough times. What are your experiences and thoughts about typography?

If you found this post useful, please share and recommend it so other people can learn too.

Additional reading:

Typography in web design

Quick dive into typography Pt1

Quick dive into typography Pt2

Dash on Wikipedia

Hyphen on Wikipedia

Serif on Wikipedia

Sans-serif on Wikipedia

Best Practices of Combining Typefaces on Smashing Magazine

Originally posted on Alex Devero Blog.