Typography: Meaning, Types and Basics for Beginners

What Is a Typeface? Typeface vs Font

A typeface is the design of a set of letters, like Helvetica or Garamond. A font is one exact version of that design, like Helvetica Bold at a certain style. In the days of metal type, a font was a physical box of letters in one size and style. Today most people use the two words to mean the same thing, and that is fine in daily life.

• Typeface: the overall design. Example: Roboto.
• Font family: all the weights and styles of a typeface together.
• Font: one member, for example Roboto Medium Italic.

So in the typeface vs font question, think of a typeface like a song and a font like one recording of it. Designers who make typefaces are called type designers, and the companies that sell them are called foundries. See our popular fonts hub for typeface examples and font families.

Types of Typefaces: Typography Categories with a Typeface Chart

Typefaces are grouped into a few big typography categories. This simple typeface chart shows the main types of typefaces with examples:

A script typeface font looks lovely in a couple of words but becomes hard to read in a long paragraph. A display typeface works as a title typeface on a poster but feels heavy in body text. Matching the category to the job is half of good typography. Our logo fonts page covers typefaces for brands.

Key Typography Terms Every Beginner Should Know

• Baseline: the invisible line letters sit on.
• x-height: the height of lowercase letters like x. A taller x-height usually reads better at small sizes.
• Ascender and descender: the parts of letters that go above the x-height (b, d, h) or below the baseline (g, p, y).
• Kerning: the space between two specific letters, like A and V. Good kerning stops awkward gaps.
• Tracking: the overall spacing across a whole word or line. In CSS this is letter-spacing.
• Leading: the space between lines. In CSS this is line-height.
• Weight: how thick the strokes are, from Thin and Light to Bold and Black. A bold typeface grabs attention; a light typeface feels airy.
• Hierarchy: using size, weight and colour so readers see the most important text first.
• Contrast: the difference between thick and thin strokes inside letters. High-contrast serifs like Bodoni feel elegant.

Types of Typography in Design, Web, Logos and Video

People use the word typography in a few areas. These are the common types of typography you will hear about:

• Print typography: books, newspapers, magazines and reports. Focus is on comfortable long reading.
• Web and app typography: text on screens. In CSS you set the typeface with font-family, size with font-size, and spacing with line-height. Free typefaces from Google Fonts are a common choice.
• Logo and brand typography: a brand often picks one or two typefaces and uses them everywhere. Some big companies commission a custom house typeface, a typeface made only for their brand, so that all their signs, apps and ads look the same.
• Poster and thumbnail typography: big, bold display type that reads from far away or on a small phone screen.
• Kinetic typography: moving text in videos, reels and title sequences, where words slide, pop or change in time with speech or music.
• Lettering and calligraphy: letters drawn by hand for one piece, rather than typed. See our calligraphy font page.

Simple Typography Rules for Beginners

1. Use two typefaces at most. One for headings, one for body text, or one family in different weights.
2. Make body text readable. Around 16 px on screens and 10 to 12 pt in print is a common start. Our fonts for paragraphs guide goes deeper.
3. Give lines room. Line height around 1.4 to 1.6 and lines that are not too long.
4. Build hierarchy. Headings bigger and bolder, body text calm and plain.
5. Align with care. Left-aligned text is easiest to read. Centre only short titles.
6. Check contrast. Dark text on a light background, or the other way round. Avoid grey on grey.
7. Avoid long ALL CAPS and long italics. They slow reading down.

Typeface Tester, Typeface Finder and Typeface Downloads

A typeface tester lets you type your own words and see them in many typefaces before you choose. Google Fonts has one built in: type in the preview box at the top and every typeface updates. Foundry websites usually have testers too.

Seen a nice design and wondering "what typeface is this"? Use our font finder guide to identify fonts from an image.

For typeface downloads, stick to legal sources: Google Fonts for free open-source typefaces, the fonts that come with Windows or Mac, or a licence bought from the foundry. Avoid cracked font packs. Our free font download page lists safe places.