Typography: The Simple (But Complete) Guide

Updated September 2026 with a clear answer to ascent vs cap height, plus today’s rules for type on screens: fluid sizes, contrast and variable fonts.

We see typography everywhere, every day: on street signs, packaging, phones, laptops and books. What fascinates most people is how different typefaces look, and how designers use them to get a message across.

Typography speaks louder than words. The typeface sets the mood and tone of a design, and sometimes the type is the design. This guide covers the essential parts of type, how to tell typefaces apart, where typography matters, and how to set type for today’s screens.

What is typography?

Typography is the art and technique of arranging type: choosing typefaces, sizes, weights and spacing so that text is readable, clear and suits its message. It is one of the main components of every design, in print and on screen.

There’s a common misconception that typography is easy. When a designer sets type, they have to think about reading distance, screen sizes and resolutions, and the people who will read it. Get the basics right first; once you have them, you will make fewer mistakes and your designs will read better.

The anatomy of type: baseline, x-height, cap height, ascenders and descenders

Every line of type sits on five invisible horizontal lines. Knowing their names makes it much easier to talk about type, choose fonts and fix spacing problems.

Baseline

The baseline is the imaginary line upon which a line of text rests. Flat-bottomed letters such as H and n sit exactly on it. Round letters such as o and s dip very slightly below it (this is called overshoot), so they look the same size as the flat ones. In most typefaces the descenders of g, p and y hang below the baseline.

Aligning to the baseline is one of the simplest ways to make a layout look tidy: text in neighbouring columns, captions and buttons all look calmer when their baselines line up.

x-height (the median)

The median, or mean line, is where most lowercase letters stop. It is also called the x-height, because it is measured from the lowercase x. A typeface with a large x-height looks bigger and is usually easier to read at small sizes; one with a small x-height tends to look more elegant and traditional at the same point size.

Cap height

Cap height is the height of the capital letters above the baseline, measured on flat letters such as H and I (round and pointed capitals like O and A overshoot it slightly). It is not the same as the ascent of the typeface.

Ascenders and descenders

An ascender is the part of a lowercase letter that rises above the x-height, as in b, d, h, k and l. A descender is the opposite: the part of a letter that drops below the baseline, as in g, j, p, q and y. The lines they reach are called the ascender line and the descender line.

Ascent vs cap height: what’s the difference?

These two get mixed up all the time, partly because “ascent” is used in two ways. Here is the difference:

• Cap height is the top of the capital letters (H, I, T).
• Ascender height (the ascender line) is the top of the tall lowercase letters (h, d, l). Designers often call this the ascent. In many typefaces, especially traditional serifs such as Garamond and Bembo, the ascenders rise noticeably above the capitals. In others the two are almost level, which is why the difference is easy to miss.
• Ascent in a font file is a measurement the type designer sets: how much space the font reserves above the baseline. It is usually taller than any plain letter, so that accented capitals such as É and Ñ fit. Descent is the same measurement below the baseline.

So from the baseline up, the usual order is: x-height, then cap height, then the ascender line (sometimes level with the cap height), then the font’s ascent.

Why it matters in practice: apps and browsers use the font’s ascent and descent to decide how tall a line of text is. That is why a text box is always taller than its capital letters, and why text in a button can look slightly off-centre even when the padding is equal. Two newer tools fix this:

• In Figma, turn on Vertical trim in the text Type settings. It removes the extra space above the cap height and below the baseline, so spacing is measured from the letters themselves.
• In CSS, text-box: trim-both cap alphabetic; trims a text box to the cap height and the baseline. It has worked in Safari, Chrome and Edge since early 2025, and in all major browsers since August 2026.

Low cap height fonts

A typeface with a low cap height has capitals that are clearly shorter than its ascenders. This is typical of old-style serifs such as Garamond and Bembo. In running text the capitals sit more quietly, so capitalised words and acronyms don’t jump out as much. Compare fonts by setting the same word, such as “Hamburg”, in each: the gap between the top of the H and the top of the b shows you the difference at a glance.

Size, weight and spacing

Point size

Points measure the size of type. One point is 1/72 of an inch (about 0.35 mm). The point size measures the whole body of the font, not any one letter, which is why two fonts at the same point size can look quite different: the one with the bigger x-height looks larger.

The right size depends on the reading distance, not on preference. When I work on text for a book design I usually use 10 pt, because a book is read close up, and most books use 10 pt or a little larger. Screens are read from further away, so text needs to be bigger. On the web, sizes are set in CSS pixels or rems: browsers default to 16px, and body text is rarely smaller than that today.

Weight

Weight is the thickness of a font’s strokes. A typeface can come in many weights; four to six is common, and some families have nine or more. On the web, weights are numbered from 100 to 900:

• 100 Thin, 200 Extra Light, 300 Light
• 400 Regular, 500 Medium
• 600 Semi Bold, 700 Bold, 800 Extra Bold, 900 Black

A variable font (see below) can use any weight in between, such as 450.

Letter spacing (tracking)

Letter spacing, also known as tracking, is an even adjustment of the space between all the letters in a piece of text.

Large text such as headlines usually looks better with slightly tighter tracking, because the gaps between big letters look wider than they are. Small text often reads better with slightly looser tracking, which gives each letter shape more room. Text set in all capitals nearly always needs extra letter spacing, even at small sizes. In CSS, tracking is the letter-spacing property.

Kerning

Kerning is the adjustment of space between two specific letters to improve how a word looks and reads. Pairs such as AV, To and Wa need less space than the font would otherwise give them. Good fonts come with kerning built in; design apps let you use it, switch to optical kerning, or adjust pairs by hand, which matters most in logos and large headlines.

Leading (line height)

The space between the baselines of two lines of text is called leading. Design apps often set it automatically: InDesign’s Auto leading is 120% of the type size. Tight leading makes lines look crowded; very loose leading makes a paragraph fall apart into separate stripes.

On the web leading is called line height. For body text, around 1.5 times the font size is a good starting point, and it is what the WCAG accessibility guidelines recommend. Headings need less, often 1.1 to 1.3.

Line length

Line length (also called the measure) is the number of characters in a line of text before it breaks onto the next line. Long lines are tiring to read, because the eye struggles to find the start of the next line. I try to keep body text between 35 and 65 characters a line. Robert Bringhurst’s classic range is 45 to 75 characters, with 66 as the ideal, and the WCAG accessibility guidelines suggest no more than 80. In CSS, max-width: 65ch; on a text column is a simple way to do it.

Typefaces

Font vs typeface

A typeface, also known as a font family, is a set of fonts. It contains all the variations of a design, such as light, regular, bold, italic and condensed. A font is one specific variation of the family, such as Helvetica Light.

People often mix the two up, and I did too at first. Today the line is blurrier still: with a variable font, one font file can hold a whole family of weights and widths.

Text type vs display type

Text type is designed for reading at small sizes, roughly 6 to 12 pt in print: body copy, captions and notes. It has open shapes, generous spacing and a sturdy build so it stays clear when small.

Display type is designed to draw attention at large sizes, typically 18 pt and above: headlines, posters and signs. It has more character, with finer details and tighter spacing, which is exactly why it becomes hard to read at small sizes. Some variable fonts now include an optical size axis that adjusts these details automatically as the size changes.

Serif

A serif typeface has serifs, small strokes or projections at the ends of the letterforms, which often recall the marks of a pen or chisel. Times New Roman and Georgia are familiar examples. Serif typefaces are usually grouped like this:

• Old style (Garamond, Bembo): gentle contrast between thick and thin strokes, a diagonal stress like handwriting, and curved (bracketed) serifs.
• Transitional (Baskerville, Times New Roman): more contrast and a more upright stress.
• Didone or modern (Bodoni, Didot): very strong contrast, vertical stress and hairline serifs. Common in fashion magazines.
• Slab serif (Rockwell, Roboto Slab): low contrast and thick, block-like serifs.

Sans serif

Sans serif typefaces are those without serifs. Arial and Helvetica are the best-known examples. The main groups are:

• Grotesque and neo-grotesque (Franklin Gothic, Helvetica, Arial): low contrast between thick and thin strokes, and vertical or no noticeable stress.
• Humanist (Gill Sans, Frutiger, Open Sans): some contrast and a slanted stress, based on handwritten letters. Very readable in long text.
• Geometric (Futura, Avenir, Montserrat): low contrast, vertical stress, and letters built from near-perfect circles and straight lines.

Why typography matters

Typography in graphic design

Typography in graphic design strongly affects how people react to a document. Choosing a typeface carefully and using it consistently matters as much as graphics, colour and images in building a professional brand.

To use typography to your advantage, anticipate how the fonts and styling will influence your audience. Used thoughtfully, type can set the right emotion before anyone reads a word.

Typography in web design

Content is the most important part of most websites, yet designers who focus on visuals and layout sometimes forget the type, even when text is the heart of the site. On the web, typography also has to work at every screen size and for every reader, which is what the section on screens below is about.

Sometimes designers use type as a visual element rather than just for reading, and that works well too: big, bold type can carry a whole page.

Typography in branding

Anything in your brand that includes text is typographic: your logo, social media, website and packaging. It plays a bigger role than most people realise. Typography in a brand communicates.

Many large companies use a logo made only of type, which shows how much impact a typeface can have. Logos generally fall into three types:

• Only visuals
• Only typography
• A combination of typography and visuals

Typography in editorial design

Typography is central to editorial design, because books, newspapers, magazines and online publications are mostly text. If the typography doesn’t get enough attention, no matter how good your illustrations and photos are, it will turn readers away. Choose editorial typefaces carefully: the main goal is for people to read the content easily.

Typography in advertising

Typography is a key part of advertising. Creative typography matters as much as colour and shape: it is one of the main ways a company gets its message to its audience. Look at any billboard, poster or flyer and you will see how much of the message the type carries. Never underestimate the value of text working with visuals.

The aesthetics of typography

Type looks easy, but it takes a lot of trial and error. It is the old “what if” principle: what if you try this, or that? In most cases you can’t really tell whether a typeface is right for a design until you have tried a few others.

Typography on screens in 2026

Responsive and fluid typography

Responsive typography changes type sizes at set screen widths (breakpoints), so text stays readable and the layout stays intact on phones, tablets and large monitors. Fluid typography goes further: sizes scale smoothly between a minimum and a maximum as the screen gets wider.

When this guide was first written, fluid type was still unusual. Today it is standard practice, done with the CSS clamp() function, for example font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);. Set the minimum and maximum in rem, never in vw alone: text sized only in viewport units doesn’t grow when someone zooms in, which fails the WCAG requirement that text can be resized to 200%.

Contrast and accessibility

Readable type needs enough contrast with its background. The current standard, WCAG 2.2, asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text (18 pt or larger, about 24px, or 14 pt bold, about 18.7px). Check your colours with a tool such as the WebAIM Contrast Checker. Light grey text on white is the most common failure.

A few other rules help everyone: keep body text at 16px or larger, use a line height of about 1.5, keep lines under about 80 characters, and make sure the layout still works when people enlarge the text or increase its spacing.

OpenType variable fonts

A variable font is a single font file that behaves like many fonts. Instead of separate files for light, regular and bold, it holds the whole range, and you can pick any point along it. Variable fonts were introduced in OpenType 1.8 in 2016, a joint project of Apple, Google, Microsoft and Adobe, and today every major browser supports them. Many of the families on Google Fonts are variable.

A variable font has one or more axes, each running between two extremes. The five standard ones are weight (wght), width (wdth), italic (ital), slant (slnt) and optical size (opsz), and type designers can add their own. On the web one file usually replaces several, and you get in-between weights such as 450 for free. Variable fonts don’t make typography responsive on their own, but they make it much easier to adjust type smoothly across screen sizes.

Conclusion

A designer should know the anatomy of type: the baseline, x-height, cap height, ascenders and descenders, and the difference between the cap height and the ascent. A typeface is a family of fonts; serif typefaces have small finishing strokes, and sans serif typefaces don’t. Typography plays a vital role in graphic design, web design, branding, editorial design and advertising, because it carries the message through text.

Above all, make sure the type you choose is readable. On screens that now means fluid sizes set with clamp(), enough contrast, comfortable line lengths, and variable fonts where they help.

Want to learn typography by designing real work? Our Graphic Design Essentials course is a part-time group course in Bangkok.

Header photo: Kyle Vaughn / Unsplash

Keep reading

ArticleModern Web Typography: Adding and Customising a FontRead the tutorialDesignChanging Units of Measurement in Adobe IllustratorRead the tutorialArticlePhotoshop UI Tutorial – Happy CafeRead the tutorial