Booklet

author

Hack University

Development

6 Typography Terms Designers And Developers Need To Know

6 Typography Terms Designers And Developers Need To Know

1. Typeface and Font

A typeface is a set of fonts that share the same fundamental design elements. Also known as a font family.

A font is a specific variation within that family based on a number of characteristics.

Typeface

- Helvetica

- Arial

- Times New Roman

Font

- Helvetica Regular

- Helvetica Bold

- Helvetica Oblique

2. Weight, Width, and Style

A weight is how thick or light the stroke of a font is.

A width is how broad or narrow the width of a font is.

A style is the change in the presentation of a typeface rather than its core design.

WEIGHT

Thin

Medium

Heavy

WIDTH

Condensed

Regular

Wide

STYLE

Outline

Solid

Shadow

3. Serif and Sans-Serif

A serif is a typeface with a tail at the end of the body. "Serif" means "tail" in Latin.

A sans-serif is a typeface that doesn't have a tail. "Sans" means "without" in Latin.

4. Alignment

Alignment refers to which side of the margin a block of text lines up with.

This is aligned This is aligned This is aligned

to the left. to the center. to the right.

Left aligned Center aligned Right aligned

5. Contrast and Hierarchy

Contrast refers to the idea of creating noticeable difference between elements in a layout.

Hierarchy refers to the order of information people should view and process information.

This statement has no contrast.

This statement has CONTRAST.

6. Tracking, Kerning, and Leading

Tracking refers to the spacing between all characters in a line.

Kerning refers to the spacing between two characters.

Leading is the spacing between lines in a block of text.

Tracking

T r a c k i n g

Kerning

Kerning

Leading

Leading

Leading

Whether you're a designer or developer, typography is for everyone!

Join our tech and design community! @hackuniversity

More booklets by Hack University

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets