What are the UI guidelines for typography?

Typography is the craft of organizing letters and text in a manner that makes it legible, clear, and visually appealing to the reader.

Importance of typography

• builds brand recognition
• influences decision making
• grabs user attention

There are various aspects of typography that need to be taken into consideration. Some of these are mentioned below:

Typeface and font

Typeface is the name of the particular design on type, e.g., Helvetica, Times New Roman, etc.

Font is a particular size, weight, and style of a typeface.

Types of typefaces

There are different types of typefaces:

1. Serif stands for stroke or line. These have small lines or curves at the end of the letters. e.g., Times New Roman, Georgia, etc.
2. Sans Serif means “without”. These do not have lines at the end of the letters. e.g., Helvetica, Arial etc.

Display typefaces

Display typefaces work well at a very large size. These can be serif or sans serif. These help establish the look of a brand. e.g., Bevan, Abril, etc.

Size

Size is measured by points abbreviated as pt. A smaller size is better for interaction heavy pages.

Leading

It is the vertical separation between lines of text.

Tracking and kerning

Tracking refers to the horizontal spacing between the letters.

Kerning refers to the adjustment of space between specific pairs of characters.

Font pairing

Use a different weight or style (bold, italic) to differentiate the text when combining fonts from the same typeface family. Do not combine similar typefaces. Pair serif with sans serif to avoid this.

Paragraph alignment

Alignment refers to the imaginary line to which the text of the paragraph aligns Left-aligned is a highly readable way to align large amounts of text. The center-aligned text draws attention due to the whitespace around it. Right aligned text and justified text are mostly not used in UI design.

Web typography rules

The following rules can improve the web’s typography, thus resulting in a better UI and UX:

1. Choose a typeface

2. Modify the font size - a large font size conveys meaning and evokes stronger feelings. Keep it between 15-25 pt range.

3. Scale the headings - only use two levels of headings. The primary heading should be 180-200% of the body text, while the secondary heading should be 130-150% of the body text.

4. Set the line spacing - 120-145% of the point size.

5. Add tracking and kerning - use less spacing for larger font sizes and more spacing for headlines.

6. Whitespace - add whitespace between headers and body text as negative space affects how you focus your attention.

7. Line-length - should be 45-90 characters. It is advisable to limit the width of the text to 66 characters.