Type something to search...
to navigateto selectESC to close

Typography

How to make typography accessible?

How to make typography accessible?

You make typography accessible by choosing clear typefaces, setting text in relative units so it scales with user preferences, giving it enough colou

Dive Deeper
What are the parts of a letterform?

What are the parts of a letterform?

A letterform is the shape of a single letter, and typographers break it down into named parts. The main ones are the stem (the main vertical

Dive Deeper
What are ascenders, descenders and the baseline?

What are ascenders, descenders and the baseline?

The baseline is the invisible line that letters sit on. Ascenders are the parts of lowercase letters that rise above the x-height, such as th

Dive Deeper
What is a baseline grid and how do you use one on the web?

What is a baseline grid and how do you use one on the web?

A baseline grid is a set of evenly spaced horizontal lines, usually one body line height apart, on which every line of text in a layout sits. Bod

Dive Deeper
What is the best base font size for websites?

What is the best base font size for websites?

For most websites the best base font size is 16px, which is also the default size every major browser uses for body text. It is large enough to r

Dive Deeper
What are the best fonts for body text on the web?

What are the best fonts for body text on the web?

The best fonts for body text on the web are typefaces designed for continuous reading on screens: they have a generous x-height, open letter shap

Dive Deeper
What are the best fonts for coding and code blocks?

What are the best fonts for coding and code blocks?

The best fonts for coding are monospace typefaces with clearly distinguished characters, a generous x-height and good rendering at small sizes. P

Dive Deeper
What are the best fonts for dashboards and data-heavy interfaces?

What are the best fonts for dashboards and data-heavy interfaces?

The best fonts for dashboards are neutral, screen-optimised sans-serifs with tabular figures, clear distinctions between similar characters and a

Dive Deeper
What are the best fonts for e-commerce websites?

What are the best fonts for e-commerce websites?

The best fonts for e-commerce websites are highly legible sans-serifs with clear numerals and a good range of weights, such as Inter, DM Sans, Ma

Dive Deeper
What are the best fonts for headings?

What are the best fonts for headings?

The best fonts for headings are typefaces with enough character to stand out at large sizes, clear shapes that stay legible in short bursts, and

Dive Deeper
What are the best free fonts for commercial use?

What are the best free fonts for commercial use?

The best free fonts for commercial use are open-licensed families such as Inter, Source Sans 3, IBM Plex, Lato, Work Sans and Public Sans for san

Dive Deeper
What are the best Google Fonts for websites?

What are the best Google Fonts for websites?

The best Google Fonts for most websites are well-crafted, widely tested families such as Inter, Source Sans 3, Roboto, Open Sans, Noto Sans and W

Dive Deeper
How to choose heading sizes for a website?

How to choose heading sizes for a website?

To choose heading sizes for a website, start from your body text size, decide how many heading levels you actually use, and give each level a siz

Dive Deeper
What is typography for CJK languages?

What is typography for CJK languages?

CJK typography is the practice of setting Chinese, Japanese and Korean text, three writing systems that share Han characters and a square, grid-b

Dive Deeper
What are the most common typography mistakes on websites?

What are the most common typography mistakes on websites?

The most common typography mistakes on websites are body text that's too small or too low in contrast, lines that run too long, line height that'

Dive Deeper
How to set up custom fonts in WordPress?

How to set up custom fonts in WordPress?

You set up custom fonts in WordPress in one of three main ways, depending on your theme. In a block theme, you can upload or install fonts throug

Dive Deeper
How does dark mode affect typography?

How does dark mode affect typography?

Dark mode typography behaves differently from light mode because light text on a dark background appears bolder, brighter and slightly larger tha

Dive Deeper
How to design readable tables?

How to design readable tables?

To design readable tables, align text to the left and numbers to the right, use tabular numerals so digits line up, give cells enough padding to

Dive Deeper
How to use emoji in web typography?

How to use emoji in web typography?

To use emoji well in web typography, treat them as text: they're Unicode characters drawn by colour fonts, so they follow your font stack, size and l

Dive Deeper
What is fluid typography and how do you build it with clamp()?

What is fluid typography and how do you build it with clamp()?

Fluid typography is an approach where font sizes grow and shrink smoothly with the width of the viewport, instead of jumping between fixed sizes

Dive Deeper
What is the font-display property and which value should you use?

What is the font-display property and which value should you use?

font-display is a descriptor you add inside an @font-face rule to tell the browser what to do with text while that font is still downloading. I

Dive Deeper
How to use the @font-face rule?

How to use the @font-face rule?

To use the @font-face rule, declare it in your CSS with at least two descriptors: font-family, which gives the font a name you choose, and `src

Dive Deeper
What are font fallbacks and how do you tune them with size-adjust?

What are font fallbacks and how do you tune them with size-adjust?

A font fallback is the font a browser uses when your preferred font isn't available, either because it hasn't finished downloading yet or because

Dive Deeper
What is a font family and what are font weights?

What is a font family and what are font weights?

A font family is a group of related fonts that share the same design, such as Roboto Regular, Roboto Italic, Roboto Bold and Roboto Black. Each m

Dive Deeper
How to use the CSS font-feature-settings property?

How to use the CSS font-feature-settings property?

The font-feature-settings property gives you direct, low-level control over OpenType features in a font. You write a comma-separated list of four

Dive Deeper
What is font subsetting and how does it reduce file size?

What is font subsetting and how does it reduce file size?

Font subsetting is the process of creating a smaller version of a font file that contains only the characters, and optionally the OpenType featur

Dive Deeper
How to use font weight to create hierarchy?

How to use font weight to create hierarchy?

You use font weight to create hierarchy by making the most important text heavier and the least important text lighter, so readers can tell what

Dive Deeper
How to choose fonts that match your brand personality?

How to choose fonts that match your brand personality?

To choose fonts that match your brand personality, start by writing down three to five traits the brand should convey, then translate each trait

Dive Deeper
What are the best fonts for dyslexic readers?

What are the best fonts for dyslexic readers?

The best fonts for dyslexic readers are clear, familiar sans-serif typefaces with distinct letter shapes, open spacing and a generous x-height, s

Dive Deeper
How to choose fonts for email newsletters?

How to choose fonts for email newsletters?

To choose fonts for email newsletters, start from fonts that are already installed on readers' devices, such as Arial, Helvetica, Georgia, Verdan

Dive Deeper
What is FOUT and FOIT and how do you prevent them?

What is FOUT and FOIT and how do you prevent them?

FOUT (flash of unstyled text) is when a page first shows text in a fallback font and then switches to the web font once it has downloaded. **FOIT

Dive Deeper
What is hanging punctuation and how do you use it in CSS?

What is hanging punctuation and how do you use it in CSS?

Hanging punctuation is the practice of placing certain punctuation marks, most often opening quotation marks, just outside the edge of a text blo

Dive Deeper
What is the history of typography from Gutenberg to the web?

What is the history of typography from Gutenberg to the web?

The history of typography in the West is usually traced from Johannes Gutenberg, who developed a practical system of movable metal type in Mainz

Dive Deeper
How do font licenses work?

How do font licenses work?

A font licence is a legal agreement that sets out how you may use a piece of font software: where you can install it, which media you can use it

Dive Deeper
How many fonts should you use on one website?

How many fonts should you use on one website?

Most websites should use one or two typefaces, and rarely more than three. A single well-chosen family can handle body text, headings and interfa

Dive Deeper
How to choose a font for your website?

How to choose a font for your website?

To choose a font for your website, start with the job it has to do, then filter candidates by readability, language support, available weights an

Dive Deeper
How to pair fonts effectively?

How to pair fonts effectively?

To pair fonts effectively, combine typefaces that are clearly different in one or two noticeable ways, such as serif versus sans-serif or express

Dive Deeper
How to preload fonts correctly?

How to preload fonts correctly?

To preload a font correctly, add a link element with rel="preload", as="font", type="font/woff2" and the crossorigin attribute to the `

Dive Deeper
How to self-host web fonts?

How to self-host web fonts?

To self-host web fonts, you download the font files in WOFF2 format, put them in a folder on your own server or in your build output, and declare

Dive Deeper
How to use variable fonts in CSS?

How to use variable fonts in CSS?

To use a variable font in CSS, declare it once with @font-face and give each axis a range rather than a single value, for example `font-weight:

Dive Deeper
How do web fonts affect page speed?

How do web fonts affect page speed?

Web fonts affect page speed in three main ways: they add bytes to download, they're discovered late in the loading process because the browser on

Dive Deeper
How to control hyphenation on the web?

How to control hyphenation on the web?

You control hyphenation on the web mainly with the CSS hyphens property. Set hyphens: auto to let the browser break words at dictionary-appro

Dive Deeper
What are icon fonts and should you still use them?

What are icon fonts and should you still use them?

Icon fonts are font files in which the glyphs are pictograms instead of letters, so you can display an icon by rendering a character in that font

Dive Deeper
What is the ideal line length for readable text?

What is the ideal line length for readable text?

The ideal line length, also called the measure, for body text is roughly 45 to 75 characters per line, including spaces and punctuation, with abo

Dive Deeper
Is it legal to use any font on your website?

Is it legal to use any font on your website?

No, you can't legally use any font on your website. Embedding a font with @font-face means serving the font file to every visitor, which counts as

Dive Deeper
What is the difference between italic and oblique type?

What is the difference between italic and oblique type?

The difference is in how the letters are made. Italic type is a separately designed style with its own letterforms, usually influenced by handwri

Dive Deeper
What is kerning and how does it differ from tracking?

What is kerning and how does it differ from tracking?

Kerning is the adjustment of space between specific pairs of letters so that they look evenly spaced, such as tucking the o under the arm of a

Dive Deeper
What is the difference between left-aligned and justified text?

What is the difference between left-aligned and justified text?

Left-aligned text lines up on the left edge and leaves the right edge uneven, so every space between words is the same width. Justified text

Dive Deeper
What is letter spacing and when should you adjust it?

What is letter spacing and when should you adjust it?

Letter spacing is the amount of space added or removed evenly between characters in a piece of text. In typography it's usually called tracking,

Dive Deeper
How to load fonts asynchronously without hurting Core Web Vitals?

How to load fonts asynchronously without hurting Core Web Vitals?

To load fonts asynchronously without hurting Core Web Vitals, let text render immediately in a fallback font, fetch the font files early, and make su

Dive Deeper
What is the minimum font size for accessibility?

What is the minimum font size for accessibility?

There is no official minimum font size for accessibility in WCAG. The guidelines require that text can be resized to 200% without breaking the pa

Dive Deeper
What is a modular type scale and how do you create one?

What is a modular type scale and how do you create one?

A modular type scale is a set of font sizes created by starting from a base size and repeatedly multiplying or dividing it by the same ratio. Wit

Dive Deeper
How to design typography for multilingual websites?

How to design typography for multilingual websites?

You design typography for multilingual websites by choosing fonts that support every script and language you publish in, marking up each page and

Dive Deeper
What are old-style and lining figures?

What are old-style and lining figures?

Old-style figures are numerals designed to behave like lowercase letters: some sit within the x-height, some rise above it like an ascender, and

Dive Deeper
What are OpenType features and how do you enable them in CSS?

What are OpenType features and how do you enable them in CSS?

OpenType features are optional typographic behaviours built into a font file, such as ligatures, true small caps, different styles of numerals, a

Dive Deeper
What are optical sizes in fonts?

What are optical sizes in fonts?

Optical sizes are versions of a typeface designed for specific sizes of text, so that small type stays legible and large type stays refined. Desi

Dive Deeper
How to choose the right paragraph spacing?

How to choose the right paragraph spacing?

To choose the right paragraph spacing, start from your body line height and set the gap between paragraphs to roughly the same value, so with 16p

Dive Deeper
How to prevent layout shift caused by web fonts?

How to prevent layout shift caused by web fonts?

To prevent layout shift caused by web fonts, make the fallback font take up the same space as the web font, so nothing moves when one replaces th

Dive Deeper
What is the difference between px, em and rem for font sizes?

What is the difference between px, em and rem for font sizes?

The difference between px, em and rem is what each unit is measured against. A px value is an absolute CSS pixel and stays the same no matter w

Dive Deeper
What is the difference between readability and legibility?

What is the difference between readability and legibility?

Legibility is how easily a reader can recognise and distinguish individual characters, such as telling a capital I from a lowercase l or a `0

Dive Deeper
How to keep text readable on top of images?

How to keep text readable on top of images?

You keep text readable on top of images by controlling the contrast between the text and whatever part of the image sits behind it. The most reli

Dive Deeper
How to handle right-to-left typography?

How to handle right-to-left typography?

To handle right-to-left typography, declare the language and direction in HTML with lang and dir="rtl", build your layout with logical CSS pr

Dive Deeper
What are script and handwritten fonts and when do they work?

What are script and handwritten fonts and when do they work?

Script fonts are typefaces that imitate writing made with a pen, nib or brush, usually with flowing strokes and letters that connect to one anoth

Dive Deeper
Should you self-host fonts or use Google Fonts?

Should you self-host fonts or use Google Fonts?

For most production websites, self-hosting fonts is the better choice: it's usually as fast or faster than the Google Fonts API, it removes a thi

Dive Deeper
What is the difference between serif and sans-serif fonts?

What is the difference between serif and sans-serif fonts?

The difference between serif and sans-serif fonts is whether the letters have serifs: small strokes or feet that finish the ends of the main

Dive Deeper
What are small caps and how do you use them properly?

What are small caps and how do you use them properly?

Small caps are capital letterforms designed to be roughly the height of lowercase letters, with stroke weights and proportions that match the sur

Dive Deeper
How to style blockquotes and pull quotes?

How to style blockquotes and pull quotes?

To style a blockquote, set it apart from surrounding text with indentation, a left border or a subtle background, keep the font size close to bod

Dive Deeper
How to style lists for better readability?

How to style lists for better readability?

To style lists for better readability, give items a little more space between them than lines within a paragraph, keep markers aligned in a hangi

Dive Deeper
What are system font stacks and when should you use them?

What are system font stacks and when should you use them?

A system font stack is a CSS font-family list that tells the browser to use the fonts already installed on the visitor's operating system, usua

Dive Deeper
What are tabular and proportional numerals?

What are tabular and proportional numerals?

Tabular numerals are digits that all have exactly the same width, so numbers stack neatly in columns and don't shift when they change. **Proporti

Dive Deeper
How to test typography across devices and browsers?

How to test typography across devices and browsers?

To test typography across devices and browsers, start with a short matrix of the browser engines and operating systems your visitors use, then check

Dive Deeper
How much colour contrast does text need for WCAG?

How much colour contrast does text need for WCAG?

Under WCAG 2.2 Level AA, normal text needs a colour contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1. L

Dive Deeper
How to use text-decoration properties for better links?

How to use text-decoration properties for better links?

To make better links with text-decoration properties, keep the underline but refine it: set text-decoration-thickness to control how heavy the

Dive Deeper
How to use text-wrap: balance and text-wrap: pretty?

How to use text-wrap: balance and text-wrap: pretty?

To use text-wrap: balance and text-wrap: pretty, add text-wrap: balance to short blocks such as headings, captions and pull quotes, and `text-w

Dive Deeper
How to truncate text with CSS ellipsis and line clamping?

How to truncate text with CSS ellipsis and line clamping?

To truncate text with CSS, use two different techniques depending on how many lines you want to keep. For a single line, combine `overflow: hidde

Dive Deeper
What are the main typeface classifications?

What are the main typeface classifications?

Typeface classifications group typefaces by their shared visual features and historical origins. The main families are serif typefaces, divided i

Dive Deeper
What is the difference between a typeface and a font?

What is the difference between a typeface and a font?

A typeface is a design for a set of letters, numbers and symbols, such as Helvetica, Garamond or Inter. A font is a specific implementation o

Dive Deeper
How to design typography for older readers?

How to design typography for older readers?

To design typography for older readers, you make text larger, darker and simpler than you might for a younger audience, and you make sure it can

Dive Deeper
How to create a typography style guide?

How to create a typography style guide?

To create a typography style guide, document the fonts you use and why, define a fixed type scale, turn every size, weight, line height and spaci

Dive Deeper
What are the most important typography trends for 2026?

What are the most important typography trends for 2026?

The most important typography trends for 2026 are less about a particular look and more about what browsers now make possible. Variable fonts hav

Dive Deeper
How to set up typography with Tailwind CSS?

How to set up typography with Tailwind CSS?

To set up typography with Tailwind CSS, load your fonts with @font-face in your main CSS file, then register them as design tokens inside an `@

Dive Deeper
What is vertical rhythm in web typography?

What is vertical rhythm in web typography?

Vertical rhythm is the consistent, predictable spacing that runs from the top of a page to the bottom: the gaps between lines, paragraphs, headin

Dive Deeper
How to use viewport units for responsive typography?

How to use viewport units for responsive typography?

To use viewport units for responsive typography, combine a viewport unit such as vw with a rem value and wrap the result in limits, for examp

Dive Deeper
What is visual hierarchy in typography?

What is visual hierarchy in typography?

Visual hierarchy in typography is the way you use differences in type, such as size, weight, colour, case, spacing and position, to show readers

Dive Deeper
What are display fonts and how do you use them well?

What are display fonts and how do you use them well?

Display fonts are typefaces designed to be used at large sizes, for headlines, hero banners, logos, posters and other short pieces of text meant

Dive Deeper
What are ligatures and when should you use them?

What are ligatures and when should you use them?

A ligature is a single glyph that replaces two or more characters that would otherwise collide or look awkward next to each other. The classic ex

Dive Deeper
What are monospace fonts and when should you use them?

What are monospace fonts and when should you use them?

A monospace font (also called a fixed-width font) is a font in which every character takes up exactly the same horizontal space, so a narrow i

Dive Deeper
What are slab serif fonts and when should you use them?

What are slab serif fonts and when should you use them?

Slab serif fonts are serif typefaces with thick, heavy, often rectangular serifs, usually close to the thickness of the main strokes. They tend t

Dive Deeper
What are superfamilies and why are they useful for pairing?

What are superfamilies and why are they useful for pairing?

A superfamily is a group of typefaces designed together around a shared skeleton, usually including a sans-serif, a serif and often a monospace o

Dive Deeper
What are variable fonts and why should you use them?

What are variable fonts and why should you use them?

A variable font is a single font file that contains a continuous range of styles instead of one fixed style. Where a traditional family ships sep

Dive Deeper
What are web fonts and how do they work?

What are web fonts and how do they work?

Web fonts are font files that a browser downloads from a server so a page can display text in a typeface the visitor doesn't have installed. You

Dive Deeper
What are web-safe fonts and are they still relevant?

What are web-safe fonts and are they still relevant?

Web-safe fonts are typefaces that come preinstalled on most computers and phones, so a website can use them without downloading anything. The cla

Dive Deeper
What is leading and what line height should you use?

What is leading and what line height should you use?

Leading is the vertical space between lines of text, measured from the baseline of one line to the baseline of the next. The word comes from the

Dive Deeper
What is typography and why does it matter in web design?

What is typography and why does it matter in web design?

Typography is the craft of arranging text so that it is readable, clear and appropriate for its purpose. It covers the typefaces you choose, but

Dive Deeper
What is the x-height and why does it affect readability?

What is the x-height and why does it affect readability?

The x-height is the height of a typeface's lowercase letters, measured from the baseline to the top of a flat-topped letter such as x, excludin

Dive Deeper
How much white space should you use around text?

How much white space should you use around text?

White space around text should grow with the size of the thing it separates: small gaps inside a block of text, larger gaps between blocks, and t

Dive Deeper
Why should you avoid all caps text?

Why should you avoid all caps text?

You should avoid all caps text for anything longer than a few words because it's slower and more tiring to read than normal mixed-case text. Capi

Dive Deeper
What are widows and orphans and how do you fix them?

What are widows and orphans and how do you fix them?

Widows and orphans are lines of text left stranded away from the rest of their paragraph. In traditional typesetting, an orphan is the first

Dive Deeper
What is the difference between WOFF, WOFF2, TTF and OTF?

What is the difference between WOFF, WOFF2, TTF and OTF?

TTF and OTF are desktop font formats, while WOFF and WOFF2 are compressed wrappers designed for delivering those same fonts over the web. TTF (Tr

Dive Deeper
What is word spacing and how does it affect readability?

What is word spacing and how does it affect readability?

Word spacing is the amount of horizontal space between words in a line of text. Its default size comes from the width of the space character in t

Dive Deeper