Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ui
ux

What are the UI guidelines for typography?

Sheza Naveed

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.

Difference between typeface and font

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.
Seris and sans serif

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.

Sizes

Leading

It is the vertical separation between lines of text.

Leading

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.

Tracking and kerning

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.

Different types of alignment

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.

RELATED TAGS

hci
ui
ux

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring