Web design glossary
A visual glossary of typography and page layouts, with examples from hand-picked websites.
A
- Above the foldPage layouts
- Above the fold is the part of a page visible before the visitor scrolls. Its extent varies with the device and browser window.
- Anchor linkPage layouts
- An anchor link points to a specific location within a page, usually through a fragment identifier such as #pricing.
B
- BaselineTypography
- The baseline is the imaginary line on which most letters sit. Descenders, such as the lower part of p, extend below it.
- Bento gridPage layouts
- A bento grid is a composition of differently sized cards arranged into a compact, coordinated group.
- Body textTypography
- Body text is the main continuous copy that explains a subject, tells a story or provides detail beneath headings.
C
- Call to actionPage layouts
- A call to action, or CTA, asks the visitor to take a specific next step, such as viewing work, starting a trial or joining a list.
- Cap heightTypography
- Cap height is the height of a typeface’s flat-topped uppercase letters above the baseline.
- Comparison tablePage layouts
- A comparison table aligns the same attributes across several options so that their differences can be inspected side by side.
- Contact formPage layouts
- A contact form lets a visitor send a message or enquiry directly from a website.
D
- Display headingTypography
- A display heading is prominent text designed to make a strong first impression, often in a hero or major section.
- Display typefaceTypography
- A display typeface is designed primarily for prominent, usually large text such as headlines, posters or short statements.
E
- Eyebrow textPage layouts
- Eyebrow text is a short label placed above a heading to establish context, category or a small piece of supporting information.
F
- Fallback fontTypography
- A fallback font is an alternative used when a preferred font cannot provide a character or is unavailable.
- FAQ accordionPage layouts
- An FAQ accordion groups questions into expandable rows, allowing visitors to reveal the answers they need.
- FontTypography
- A font is a usable instance of a typeface, traditionally a particular size and style and, on the web, usually a font resource.
- Font familyTypography
- A font family groups related styles of a typeface, usually including different weights and sometimes italics or widths.
- Font pairingTypography
- Font pairing is the deliberate use of two or more typefaces together, with a clear role for each.
- Font weightTypography
- Font weight describes how light or heavy the strokes of a font appear.
- FooterPage layouts
- A footer is the closing area of a page, often containing secondary navigation, contact information and required site information.
G
- Grid layoutPage layouts
- A grid layout arranges content using a recurring structure of rows, columns and the gaps between them.
H
- Header navigationPage layouts
- Header navigation is the set of links near the top of a page that helps visitors reach its main destinations.
- Hero sectionPage layouts
- A hero section is the prominent opening area of a page, introducing its subject and often its main action.
- How it worksPage layouts
- A how-it-works section explains a process in a short sequence of understandable steps.
I
- ItalicTypography
- Italic is a slanted type style, often with letterforms redesigned to work at an angle.
K
- KerningTypography
- Kerning adjusts the spacing between particular pairs of characters to make the visible gaps feel more balanced.
L
- LeadingTypography
- Leading is the distance between successive text baselines. On the web it is usually discussed as line height.
- LetterformTypography
- A letterform is the drawn shape of a letter, including its strokes, curves and internal spaces.
- Line lengthTypography
- Line length is the horizontal measure of a line of text, often described by its width or approximate number of characters.
- Logo cloudPage layouts
- A logo cloud is a group of organization marks used to communicate a relevant relationship, such as clients, customers or partners.
M
N
- Newsletter signupPage layouts
- A newsletter signup invites visitors to subscribe to recurring emails, usually by entering an email address.
P
- Pricing tablePage layouts
- A pricing table presents plans or packages in a structure that makes their prices and differences easier to compare.
S
- Sans serifTypography
- A sans serif typeface has letterforms without the finishing strokes called serifs.
- SerifTypography
- A serif is a small finishing stroke on a letter. A serif typeface uses these strokes as part of its letterforms.
- Social proofPage layouts
- Social proof is evidence of other people’s experience or participation that helps a visitor evaluate an offer.
T
- Team sectionPage layouts
- A team section introduces the people behind a company, project or service.
- TestimonialPage layouts
- A testimonial is a quoted account from a customer, client or other relevant person about their experience.
- TimelinePage layouts
- A timeline arranges events or milestones in chronological order and makes their sequence visible.
- TrackingTypography
- Tracking is an adjustment to the spacing across a run of characters, often called letter spacing in web design.
- Type scaleTypography
- A type scale is a coordinated set of text sizes used for recurring roles across a design.
- TypefaceTypography
- A typeface is the design of a set of letters, numbers and symbols, such as Inter or Editorial New.
- Typographic hierarchyTypography
- Typographic hierarchy makes the relative importance of text clear through differences in size, weight, spacing, placement or style.
V
- Variable fontTypography
- A variable font stores a range of design variations in one font file, controlled through axes such as weight or width.
- Visual hierarchyPage layouts
- Visual hierarchy is the arrangement of elements so that their relative importance and the intended reading order are apparent.
W
- WaitlistPage layouts
- A waitlist collects interest from people who want access to a product, service or event that is not yet generally available.
- WebfontTypography
- A webfont is a font resource that a website makes available for the browser to use when rendering its text.
- White spacePage layouts
- White space is the unoccupied space between and around elements. It can be any background color.
X
- X-heightTypography
- X-height is the height of a typeface’s lowercase x, measured from the baseline.
Z
- Z-pattern layoutPage layouts
- A Z-pattern layout alternates the placement of text and imagery across successive rows, creating a zigzag rhythm down the page.
