How typography fundamentals shape how people read

First impressions matter, as every brand pro knows. Most users will leave a web page very quickly if the content isn’t clear and compelling, so the details they see first count. Designers agree, with 57% of those surveyed in our State of the Designer 2026 report identifying visual polish and attention to detail as part of craft. Typography fundamentals are among those first details that shape how users read and see your brand.

Your creative team works hard to convey your brand message in engaging, accessible language. Now they’re counting on you to make good typography and design decisions for better readability and brand engagement.

Read on to learn more about:

• What typography is, and why it’s important
• Five popular typefaces and seven key elements of typography
• Typography defaults for screens, along with common font properties
• How to find and explore typefaces and fonts with Figma

What is typography, and why does it matter?

Typography in design involves creating or selecting a system of typefaces and fonts to express the written word. This art form can evoke strong emotions, using visually appealing letters and arranging type to express your brand personality. Well-crafted typography can support clear communication, with legibility covering how easily readers distinguish letters, and readability referring to how comfortably they read passages.

Before computers, printers set text with individual metal letters that they could arrange. If looking at the movable metal type, the history of typography dates back to Korea with the Jikji, the oldest surviving book, produced in 1377. Johannes Gutenberg introduced metal movable type to Europe in the 1400s, and European printers soon added the Roman and italic typefaces we still use.

Today, typography in graphic design and on the Web draws on large libraries of typefaces and fonts. It plays a key role in creating quality websites, apps, emails, ebooks, and more.

Typography is important because it can help you:

• Attract users with typefaces and typographic elements that grab their attention before they start reading.
• Set visual hierarchy with consistent type sizes, weights, serif and/or sans-serif fonts, font pairings, and typeface combinations to guide users and improve readability.
• Build brand recognition by helping users identify your brand through the typeface and font styles used in your branded content.
• Support content goals with consistent letter spacing, line lengths, upper and lowercase letters, and other typographic elements, which boost legibility, while fonts used as graphic design elements amplify tone and meaning.

5 most popular types of typefaces

Modern designers typically choose from five popular kinds of typefaces: serif, sans serif, script, monospace, and display. Each typeface includes a family of fonts that covers that typeface’s various styles. For example, Helvetica is a typeface, while Helvetica Light and Helvetica Regular are fonts.

Each typeface has its own look and best use case:

• Serif fonts: This formal, more traditional typeface has short lines or strokes that extend from the upper and lower ends of letterforms. Examples include Times New Roman, Garamond, and other serif fonts. Serifs often appear in editorial design. The New York Times sets its headlines in a custom version of Cheltenham, a serif typeface.
• Sans serif fonts: This simple, modern typeface doesn’t include the flourishes found in the serif typeface. It’s a popular choice for youthful brands and tech startups, like Target, Airbnb, and DoorDash. Some examples are Helvetica, Arial, Calibri, and other sans serif fonts.
• Script fonts: This fluid, cursive typeface can range from elegant calligraphy to playful handwriting styles. Not ideal for body text, a script typeface works best for quotes, signatures, and short headers. These include Snell Roundhand, Pacifico, Scriptina, and other script fonts.
• Monospace fonts: This retro, typewriter-style typeface displays fixed-width letters and spacing, so every character takes up the same width. Used in source code for easier readability, monospace typeface also appears across numerous websites and graphic designs. Examples include Courier, Bergen Mono, and Source Code Pro.
• Display fonts: Also known as decorative, this attention-grabbing typeface can add some flair and originality to logos, banners, and headings. Display typeface examples include Clearview, Johnston, and Skywalker.

Key elements of typography

You can fine-tune the look, legibility, and mood of a word, line of text, or product by adjusting one or more typography elements.

Alignment

This element is one of the core graphic design principles, creating balance and helping users move down a page. Align design elements, such as your logo, images, header, and body text, so the reader doesn’t have to jump around to find what to read next. Space each design element equally, and employ margins and padding consistently.

Alignment in typography also covers justification, which is how lines of text are positioned within a text box. Choose left justified, right justified, full justified, or centered text based on your project needs. Designers might center a heading or short quote, but left-justify long-form copy, so every line starts in the same place.

Here are some examples of justification:

• Left justified is when the beginning of each line of text starts at the same x value along a left margin. This is also known as left-aligned, and it creates a rag on the right.
• Right justified is when the end of each line of text is flush against a right margin. This is also known as right-aligned, and it creates a rag on the left.
• Full justified is when both the left and right ends of lines of text are flush to both sides of the text box. Letter-spacing and word-spacing are adjusted to set each line of text to a consistent width. There is no rag with full justification.
• Centered text is the absence of justification.

Color

Select a color palette that’s consistent with your brand and clearly conveys your message. Adjust text opacity and use complementary colors that contrast well against each other to ensure readability and accessibility. You can use a color wheel generator to create a well-balanced color palette. Bolder, brighter colors may work better for headings and subheadings, while neutral colors suit large blocks of text.

Pro tip: See Web Content Accessibility Guidelines (WCAG) for ideal contrast ratios. These guidelines set a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text, which WCAG defines as 18pt or 14pt bold and above. Enter your text and background colors in our color contrast checker to see the ratio and whether it meets WCAG standards.

Hierarchy

Developing a text hierarchy in your typography helps prioritize and surface key information so it’s easy to scan and digest. Your main details here are size, weight, color, contrast, case, and space. Size is the strongest indicator of visual hierarchy. Make headings larger than subheadings, and subheadings larger than body text.

For example, website body text is typically 16px, with H1 headers set at 48px. Play with white space and different typefaces to reinforce visual hierarchy.

Kerning

Kerning in typography is the space between individual letter pairs. Adjust the amount of space between individual letters so that the distance appears consistent. Proper kerning helps boost your text’s visual appeal while improving legibility.

Many design programs apply kerning automatically, but large display type and unusual fonts deserve a visual check.

Leading

Leading refers to line height, which is the distance between one text line’s baseline and the baseline of the text line above it. For body text, line height between 120% and 145% of the font size, or about 1.2 to 1.45 times, keeps lines easy to follow.

Layouts should also keep working when users set line height to 1.5 times the font size, which WCAG 1.4.12 requires. That said, every typeface requires fine-tuning and careful line spacing.

Tracking

You can improve readability with tracking (aka character spacing), which covers the overall spacing between letters in a word or line of text. Unlike kerning, which adjusts specific letter pairs, tracking changes the spacing across a whole range of text.

Increase tracking to add space, and decrease tracking to reduce it. Words or phrases displayed in all capital letters are sometimes easier to read with increased tracking.

Line length

Line length is the distance between the left and right edges of a block of text, measured in characters per line. For body text in English, aim for about 45 to 75 characters, including spaces and punctuation. Longer lines make it harder for readers to find where the next one starts. If lines need to exceed 75 characters, increase the line height. The strictest level of WCAG sets 80 characters as the maximum width.

When laying out text, one aspect to examine is the rag. The rag is the uneven edge of left- and right-aligned text. You can adjust the rag by widening or narrowing the box, or by changing the letter spacing across the entire body of text.

That tweaking can leave a word stranded on its own line. When the last line of a paragraph lands alone at the top of the next column, it’s called a widow, and a first line left alone at the bottom of a column is an orphan.

However, as May-Li Khoe points out:

Refer to them as “danglies” instead.

Typography defaults for screens

These web typography numbers are starting points, so adjust them for your typeface, audience, and screen. Use the table as a quick reference when you set up type for a website or app:

In Dev Mode, developers can inspect text styles and variables, so the numbers you choose are easy to find at handoff.

Font properties in design

Font properties are the settings that define how a font looks, from its weight and style to its size. While key elements in typography design are arranged on the page, font properties change the letters themselves. Let’s take a look at some aspects of font properties:

Weight

Weight refers to the thickness of a letter’s stroke. A typeface can range in weights from hairline to ultra-black and have many fonts in between, while some typefaces may come in only one weight. These weights also have a number association, which is helpful to understand when programming or collaborating with a developer. Weights generally coordinate to a number on a scale of 100 to 900, with intervals of 100: Regular 400, Medium 500, Semi-Bold 600, Bold 700, etc.

For example, Montserrat by Julieta Ulanovsky and studio has multiple styles and weights, such as regular, bold, italic, thin, black, and each has a font. A font is a file for installing and using a set of type in a particular font weight and text style. A typeface with multiple weights has a font for each weight, together they are known as a font family.

Limit a layout to two or three weights so hierarchy stays clear, and use the font’s bold file.

Style

Font style is the adjustment of the characters or case, such as italics and all caps, respectively. Some typefaces have no style option, and sometimes only offer a Regular weight.

Letter case, also referred to simply as “case,” is the distinction between smaller letters like lowercase and larger letters like uppercase or capital letters. Most typeface sets have letters in both, while fonts like Bangers are set in uppercase only. Typefaces set in only uppercase or only lowercase letters are far less common.

In English, the various case styles are used differently, depending on the circumstances:

• Title Case, is a Mixed-case Style Where All Words in a Sentence Are Capitalized With The Exception of Articles, Short Prepositions, and Conjunctions. These Exceptions Are Somewhat Subjective.
• Sentence case is what we’re used to seeing text written in, including this sentence.
• ALL CAPS is when all text is uppercase and is commonly used for headings, wordmarks, button text, or other types of labels. Use it for emphasis, rather than long-form text where the lack of ascenders and descenders can make it hard to read in large quantities. All Caps is also used online to imply yelling, so avoid using it in chat- and conversation-based interfaces.
• Small caps are similar in form to capital letters but are as tall as the x-height of the typeface. Small caps are used to distinguish from body text and heading text, however, they are not offered in many typefaces.
• all lowercase text is a stylistic choice used in some products and wordmarks for aesthetic purposes.

Size

Setting and changing the type size of type can be a difficult decision. It depends on the medium, such as paper, a mobile phone, or a billboard, and it can change with the viewer’s device and your design’s responsiveness. Use size as one of your main elements of emphasis when you build hierarchy.

In web development, some key sizes need to be defined, such as the heading, subheading, body text, menu and footer text. Many designers start with the heading size, also known as the H1, but it may be helpful to begin with the body text size, as that is how front-end developers might implement it. When a developer works in ems, a unit of measure based on scaling, the body text size is 1em and every other text size is a multiple or fraction of it.

For example, a common body text size for the web is 16px. The H1 may be set at 3em, or three times the body text size, in this case 48px. Because the web page will be designed for multiple screen sizes, the designs you create may require different font sizes depending on the customer’s device. The developer can have the body text size change with the browser dimensions of your customer, and all other text will scale accordingly.

To keep sizes consistent, pick a set of sizes, called a type scale, and reuse it across your designs.

How to pick the right typeface

The process for choosing a typeface breaks down into these key steps:

• Consider your project scope, requirements, and goals. Ask your team key content questions: How are we delivering content (via app, website, email, or print collateral)? Who’s our audience, and what are their needs? What typefaces and fonts do our competitors use? Keep in mind that some typefaces work better for headers than menu text. Others have large font families with international scripts, glyphs, and other special characters.
• Create a mood board to develop a visual tone, based on user and competitive research. When we commissioned our custom typeface, Figma Sans, the team at Grilli Type started a Figma mood board to organize ideas and spot where they overlapped or differed. Thierry Blancpain, CEO and co-founder of Grilli Type, says “opinionated” was the anchor word throughout the brief, giving them a shared direction for design.

• Explore typeface options on your computer or on sites such as Google Fonts. Look for a typeface with visual cues that echo what you want your product or brand to convey. For example, if your brand’s tone is professional rather than light-hearted, pick a serious typeface with few embellishments. Which of these Figma design examples appears more professional to you? If you picked the module on the left, you’re on the right track. That module employs Roboto, a clean, easy-to-read sans serif typeface. The module on the right includes Almendra, a calligraphy-based typeface often used in children’s books.

• Pick typefaces that are on-brand and eye-catching to support your project goals. Consider typography anatomy (e.g., x-heights, cap heights, counters, ascenders, and descenders), ability to scale, legibility, personality, and decoration. These elements influence a typeface’s overall look and feel.
• Try out your typefaces with real, relevant content. This helps you choose a typeface that engages your users. Try the typeface in a few different sizes to make sure it works for both large and small text.
• Test your brand colors on your typeface. Start by placing black text on a white background and white text on a black background. Then apply your primary brand color to the text, and see how the typeface works against both white and black backgrounds. Reverse the colors to see how white and black text looks on a background in your primary brand color.

Typography fundamentals FAQ

What is the “Golden Rule” of typography?

Typography has no single official golden rule, but a good working one is to put readability first. Type should make content easy to read before it does anything else. The fundamentals, including contrast, line height, and line length, all serve that goal.

What is the difference between a typeface and a font?

A typeface is the overall design of a set of letters, such as Montserrat, while a font is one weight and style of that design, such as Montserrat Bold. In everyday use, many people use the two terms interchangeably.

What are best practices for Web typography?

Web typography best practices start with readable defaults: 16px body text and a contrast ratio of at least 4.5:1 for regular text. Keeping lines to 45–75 characters and letting text resize up to 200% without losing content matter are equally important.

Jumpstart your typography explorations with Figma

Typography fundamentals focus on choosing a typeface that customers can read clearly and that helps connect with your brand. Trying a few typefaces in your own project shows how those fundamentals play out. When you’re ready to find the right type for your brand, we’d love for you to try Figma.

Here’s how to get started:

• Compare typefaces in Figma Design, starting with the typeface exploration example.
• Build a brand mood board with FigJam’s moodboard maker.
• Inspect text styles and variable font properties in Dev Mode before handoff.
• Browse fonts and typography templates shared by the Figma Community for inspiration.