Typography

The art and technique of arranging text for readability, legibility, and visual appeal. Good typography guides readers through content while reinforcing brand personality. Study typography fundamentals—font choice, sizing, spacing, and hierarchy—to elevate all your designs.

Related terms

Related terms

  • Font Variable

    Framer

    A variable font containing multiple weights, widths, or styles in a single file, enabling smooth interpolation between values. Variable fonts reduce file downloads while offering greater typographic flexibility. Use variable fonts for performance benefits and fluid typography that responds to user preferences.

  • Google Fonts

    Typography

    A library of free, open-source web fonts hosted by Google with global CDN delivery for fast loading. Google Fonts simplifies typography with easy embedding and wide browser support. Framer integrates Google Fonts directly, making them available without additional configuration.

  • Rich Text

    CMS

    Formatted text with styling like bold, italic, headings, lists, and links, beyond plain unformatted text. Rich text fields in Framer’s CMS allow content editors to format text without touching design. Connect rich text fields to styled containers for consistent typography.

  • Style

    Design

    A saved set of visual properties—colors, typography, effects—that can be applied consistently across elements. Styles enable design system consistency and make global updates efficient. In Framer, text and color styles ensure brand coherence throughout your project.

  • Text

    Typography

    Written content displayed on web pages, the primary means of communicating information to visitors. Quality text content is essential for engagement, SEO, and accessibility. Structure text with headings, short paragraphs, and scannable formatting.

  • Theme

    Design

    A cohesive set of design choices—colors, typography, spacing—that can be applied across a site or component library. Themes enable consistent styling and support features like dark mode. Framer’s variables support theming through switchable value sets.

  • Viewport Width (vw)

    Responsive

    A CSS unit equal to 1% of the browser viewport width, enabling fluid sizing relative to screen width. Vw units are useful for responsive typography and full-width elements. Combine with max-width constraints for practical maximum sizes. See Relative, fixed, and viewport Sizing in Framer.

  • Web Font

    Typography

    A font loaded from the web rather than installed locally, ensuring consistent typography for all visitors. Web fonts expand typographic options beyond system fonts but add loading time. Framer provides Google Fonts integration and supports custom font uploads for brand fonts.

  • Mobile Responsive

    Responsive

    Design that adapts fluidly to mobile screen sizes through flexible layouts, scaled typography, and touch-friendly interactions. Mobile responsiveness is essential as mobile traffic often exceeds desktop. Test designs on actual devices to catch issues emulators miss.

  • Baseline

    Typography

    The invisible line where the bottom of most letters sit, used as a reference point for aligning text and maintaining vertical rhythm. Baseline alignment ensures multiple text elements appear visually connected even at different sizes. Understanding baselines helps create polished typography in multi-column layouts.

  • Mood Board

    Design

    A visual collage of images, colors, typography, and textures capturing the intended look and feel of a project. Mood boards align stakeholders on aesthetic direction before detailed design begins. Create mood boards to explore and communicate design concepts efficiently.

  • Style Guide

    Design

    Documentation defining a brand’s visual standards including colors, typography, spacing, and component usage rules. Style guides ensure consistency across team members, projects, and time. Maintain living style guides that evolve with your design system.

  • Design Tokens

    Design

    Named values storing design decisions like colors, spacing, and typography, enabling systematic design across platforms. Tokens create a single source of truth that can be translated to different implementation contexts. In Framer, variables serve as design tokens for colors, numbers, and responsive values.

  • Scale Tool

    Design

    A design tool used to resize selected layers proportionally, often including typography and effects. It helps preserve visual relationships when scaling multi-element compositions.

  • Bowl

    Typography

    In typography, a Bowl is the rounded enclosed or partially enclosed stroke that forms letters like o, d, and p.

  • Font Family

    Typography

    A Font Family is a grouped collection of type styles and weights designed with consistent visual DNA for cohesive typography systems.

  • Points

    Typography

    Points are a standard unit in typography for sizing text and related spacing, where 1 point equals 1/72 of an inch.

  • Readability

    Typography

    Readability describes how comfortably users can consume written content, influenced by typography, line length, spacing, and visual contrast.

  • Sans Serif

    Typography

    Sans Serif refers to letterforms without small finishing strokes, commonly chosen for modern, legible screen typography.

  • Token Design

    Design

  • Text decoration

    Typography

    Framer text decoration helps designers style links, emphasis, and editorial details while keeping type treatments consistent across a site.

  • Font Subsetting

    Performance

    In Framer, font subsetting can improve page speed by minimizing font downloads while preserving the typography needed for the published site.