Typography is a key component in almost every digital experience. However, its complexity and jargon make it a common source of misunderstanding.
Understanding key typography terms will allow you to:
- Increase the legibility (and therefore usability) of an interface
- Improve visual polish and professional appearance
- Create a more consistent brand identity
- Cut down on costly revisions and iterations
- Communicate effectively with team members
Jump to a definition in the table or review the complete glossary:
Aperture
The negative space, not completely enclosed, created within certain letters. For example, the inside of C, the two spaces in S, and the bottom of e. Typefaces with large apertures tend to be more legible than those with narrow or tight apertures.
Ascender
A section of certain lowercase letters that stretches above the x-height, like the stem of “b,” “d,” “k,” or “t.”
- See also: x-height
Baseline
The theoretical line that the bottom of all letters rest on (think about the lines on ruled paper). Descenders cross this line.
- See also: descender
Cap Height
The height of capital letters in a typeface. It is measured from the baseline to the top of the character.
Bold
A font style that is thicker, and thus visually darker, than regular text. It is used to draw users’ attention to specific words or phrases.
Descender
A section of certain lowercase letters that stretches below the x-height, like the stem of a g, p, or y.
Em
A relative unit of measurement that is equivalent to the font size being used. For example, if the point size is 12pt, than 1 em = 12 pt. Ems are valuable because the measurement automatically scales appropriately as the point size shifts.
Em-Dash
A punctuation mark (—) that is the equivalent width of an m and used to indicate an interruption or break in thought. It is not to be confused with an en dash (-) which indicates connections.
En-Dash
A punctuation mark (-) that is the equivalent width of an n and is used to indicate ranges and connections. It is not to be confused with an em dash (—) which suggests a break in thought.
Font
A specific set of distinct, stylized letters within a typeface. For example, Garamond Regular, bold, 12px and Arial, italic, 6px.
Font should not be confused with typeface or font family. A font describes the specific size, style, and weight of text that designers can use. A typeface is the group to which a specific font belongs.
- See also: typeface
Font Decoration (Text Decoration)
Embellishments to lines of text including overline, underline, and strikethrough text. Font decoration is different from font effect (e.g., shadows), font style (e.g., italics, uppercase), font weight (e.g., thin, bold text), and font width (e.g., narrow, extended).
Font Style
The specific variant of a typeface’s appearance within a type family. The font style is often identified within the font name.
Font Weight
The thickness of the lines in each letter. Some examples include: thin, ultrathin, light, regular, medium, semibold, bold, extra bold, black, and ultrablack.
Hanging Indent
When the first line of text in a paragraph has a leftmost margin that is further to the left than that of the other lines within the same paragraph. A hanging indent is often used to help make key phrases or terms prominent and can sometimes aid in scanning lists.
Italic
A font style that slants characters to the right. It is used to draw users’ attention to specific words or indicate proper nouns.
Kerning
The negative horizontal space between consecutive characters, often applied to a specific group of letters. Sometimes, kerning is referred to as the “breathing room” between letters. There is usually an automatic or standard spacing associated with each typeface; however, this may be altered to achieve a visually balanced appearance.
- See also: letter spacing
Leading (Line Height or Line Spacing)
The negative vertical space between consecutive text lines, measured baseline to baseline. The baseline is the base of each letter not including downstrokes (such as those seen in lowercase p and q).
Letter Spacing (Tracking)
The space between the widest points of each character. Not to be confused with kerning (see below), which is often applied to the entire word, line, or paragraph.
- See also: kerning
Ligature
Two or more letters touching to form a single character. A ligature might be a decorative choice for branding or aesthetics purposes or a cue for linguistics purposes.
Line Break
A point in a block of text which designates the end of one line of text and the beginning of the next line. Not to be confused with a paragraph break. Line breaks are often found in HTML as the tag <br/>; they correspond to a soft return on the keyboard.
- See also: paragraph break
Monospaced
A typeface where each character is the same width (for example, Courier New). Monospaced typefaces are used when uniform spacing is useful, like programming and tables.
OpenType (OT)
A flexible font format designed to be used across Mac and Windows systems. OpenType is the new standard for digital fonts.
Orphan
A very short line of text (usually made up of a single word) appearing on its own line after a line break.
To avoid orphans, consider inserting a line break (and not a paragraph break)) earlier in the sentence so that the word does not “live alone,” on the line. It is better to have more than two words on the last line, if possible, for a more comfortable, visually balanced appearance.
- See also: line break, paragraph break
- Related article: Visual Design Terms Glossary
Paragraph (Text) Alignment
Formatting attribute that dictates the appearance of text throughout a paragraph. Common options for paragraph alignment include left-aligned, right-aligned, centered, and justified. In UX, left-aligned text is preferred for its readability and scannability.
- Related article: Legibility, Readability, and Comprehension
Paragraph Break
A point in a block of text that designates the end of one paragraph and the beginning of another. It often results in a larger vertical space between the two paragraphs than that between the lines of text within a paragraph.
- See also: line break
Pica
The unit of measurement for type sizes (1/6th of an inch). This measurement system is more common when manually typesetting.
- See also: em
Point (pt)
The unit of measurement for type sizes (1/12th of a pica). One point (pt) equals one pixel on a 100% zoomed computer display.
Point Size
The size of the space a character takes up (the character itself, as well as the space the character needs around it). Most printed books use 10–12 point-size text.
- See also: point
Small Caps
A typeface style in which uppercase characters designed to be the same height as lowercase letters. They are often used in subheadings, titles, or emphasis text.
Text Shadow
A visual effect added to text to make it appear 3D. A text-shadow can range in color, position relative to the text, blur radius (the distance the shadow blurs outward), and opacity (the transparency of the shadow).
Typeface (Font Family)
A family of letters and characters that are designed to be presented together to form words and numbers. The typeface is the group to which a specific font belongs. Arial, Calibri, and Helvetica are examples of typefaces.
Some typefaces must be purchased from a type foundry, while others are available in the public domain.
When deciding on typefaces for your designs, consider whether they are web-safe. If a typeface is not web-safe, the text may not load as intended and designers may need to create an image of the desired font for the font to appear correctly. This solution can be acceptable for logos, but, otherwise, text on images cannot be read by screen readers, indexed by search engines, or used in a CTRL+F function, further impeding accessibility, SEO, and usability. Web-safe fonts, on the other hand, make these things possible.
- See also: font
- Related article: Variable Fonts and Wide-Screen Layouts: Adopting Data-Driven Progressive Enhancements
Sans-Serif Font
A font without serif. Before the digital age, serif fonts were deemed more legible and easier to read. Now, sans-serif fonts have comparable and sometimes better legibility, especially on digital screens. (Serifs sometimes don’t render as nicely on low-resolution screens.)
These two styles of font also have an impact on the tone of a website. Sans-serif fonts often seem modern, hip, cold, and impersonal, while serif fonts may carry a traditional, warm, expensive, and old-fashioned connotation.
- See also: serif, serif font
Serif
A serif is a small hook-like element, which resembles a foot, found on the end of lines in some typefaces.
- See also: sans-serif font, serif font
Serif Font
A font in which the letters have serifs on the ends of the lines on each letter.
- See also: serif, sans-serif font
X-Height
The height of a lowercase x in a typeface. It captures how tall a standard, lowercase letter within a typeface will be. It is used to describe the proportions of a given typeface (and how large it may appear compared to other typefaces at the same font size).
