Typography basics breakdown
There are many parts to creating a beautiful, functional, memorizing design. That’s what all User Experience designers set out to do. You need to consider your users, strategy, features, content, color, and so much more. All important in their own right.
One noteworthy element of designing is Typography.
Why Does Typography Matter?
Typography speaks volumes of the voice of a product, desired brand, and can elicit specific emotions or feelings from users.
Use typography to set the tone of your product. It may be what makes-or-break the product's success.
Establishing information hierarchy, fonts can create better readability. Ultimately, creating better usability of your product.
As a UX designer, knowing the basics of typography will help you grow your visual eye. So, let’s talk about the most important elements of typography.
Breaking Typography Down
To understand typography, we need to break it down. Below is an introduction to typefaces, fonts, serif and sans-serif, sizing, line width, leading, tracking and kerning.
Typefaces
Typefaces are a specific grouping of characters that share similar characteristics. Think of it as a family. Raleway is a typeface. It includes a collection of fonts that share the same elegant sans-serif qualities.
Fonts
Fonts are a specific member of the typeface family. They have a style that differs from the rest. Styles like think, bold, italic, roman that clearly sets them apart. An example of a font is Raleway, Bold, 700, Italic.
Serif vs Sans-Serif
Serifs and sans-serif are visual descriptions of the letters in a typeface. Serifs represent a small decorative line projection on a stroke of a letter. The word ‘sans’ means ‘without’. So sans-serif simply means that there is no small decorative projection on the letters.
Sizing
There is no standard. But there are some general rules I like to start with when designing.
First set your body copy size. I usually land somewhere between 15 px and 23 px. Your body copy will be your base—use it to make calculations for the following type of text.
- Header: 300% of the body copy
- Sub-header: 150% of the body copy
- Navigation Elements:120% of the body copy
- Byline text: 75% of body copy
Leading
Leading is the amount of space between lines of text. It is crucial to have the proper amount of space to allow for readability of all users. A good rule is to apply leading as 120%-150% of the text size.
Line Width
Line width is measured in Characters Per Line or CPL. This is the amount of characters including spaces that is optimal on a line of text including paragraphs and single line text. Shoot for 50–70 characters per line.
Tracking
Tracking is the uniform space between letters in a word. Often, you will see loose tracking (more space) and tight tracking (less space) when creating emphasis on text. Thinner text with loose tracking creates a elegant look while large/bolder text with tight tracking can be be powerful
Kerning
Kerning is used to adjust the spacing between 2 characters in a word. This is used to create better visibility of the word.
When I first started in design, I was constantly googling for definite answers and rules. No website said the same thing. It was frustrating. But there is no strict rule or guide. The suggestions above are great places to start in your design. Make sure to consider the characteristics in your design and who you are designing for in order to make the necessary design decisions that are unique to your project.
