How do you create a typographic scale for software?

Pick a base size (16px is standard for web) and a scale ratio. Common ratios include 1.2 (minor third), 1.25 (major third), and 1.333 (perfect fourth). Multiply the base by the ratio for each step up: 16, 20, 25, 31, 39. This mathematical relationship creates visual harmony and reduces arbitrary sizing decisions.

What fonts work best for software interfaces?

Sans-serif fonts with large x-heights, open apertures, and clear character distinction perform best. Inter, IBM Plex Sans, and Source Sans Pro are excellent free options. For code, use JetBrains Mono, Fira Code, or SF Mono. Avoid decorative fonts for UI text. Prioritize legibility at small sizes over aesthetic preference.

How do you make typography responsive in web apps?

Use CSS clamp() to set fluid sizes that scale between breakpoints: font-size: clamp(1rem, 0.5rem + 1vw, 1.25rem). Define your type scale tokens with clamp values so headings and body text resize smoothly. Avoid media-query-based jumps that create jarring size changes during window resizing.

What line height should I use for UI text?

Use 1.5 for body text to meet WCAG accessibility guidelines. Headings can tighten to 1.2-1.3 since larger text needs less relative spacing. UI labels and buttons use 1.25-1.4 depending on size. Avoid unitless line-height below 1.2 as it causes readability issues, especially for multi-line text.

How many font weights should a software product use?

Limit to three weights: regular (400) for body text, medium (500) for emphasis and labels, and semibold (600) or bold (700) for headings and key actions. More than three weights create visual noise and increase page load time. Define weight tokens to prevent developers from using arbitrary values.

AI-Native DesignPerspectives

The Typography Stack: Why Font Choice Signals Product Quality

Inter, JetBrains Mono, SF Pro — why specific fonts communicate specific values.

The Prompt Engineering Project February 21, 2025 5 min read

Quick Answer

Typography for software requires a systematic approach with a modular type scale, consistent line heights, and accessible contrast ratios. Start with a base size of 16px, choose a scale ratio like 1.25 (major third), and generate heading sizes mathematically. Use no more than two typeface families. Define type tokens for weight, size, line-height, and letter-spacing so the system stays consistent across every screen and component.

Before a user reads a single word of your interface, they have already formed an opinion about your product. That opinion is shaped by typography. The weight of a heading, the spacing between lines of body text, the monospaced font in a code block -- these are the first signals of quality, and they arrive faster than conscious thought. Cheap fonts suggest cheap products. Considered fonts suggest considered products. There is no neutral ground.

The Prompt Engineering Project uses three typefaces: Inter for body text, JetBrains Mono for code, and SF Pro for system contexts. Each was chosen for specific, defensible reasons. Together they form a typography stack that communicates professionalism, technical credibility, and visual clarity across every surface of the product.

Inter: Designed for Screens, Not for Print

Inter was designed by Rasmus Andersson specifically for computer screens. That specificity matters. Most typefaces in widespread use were designed for print and adapted to screens as an afterthought. Inter inverts that priority. Its letterforms are optimized for pixel grids. Its x-height is tall, improving legibility at small sizes. Its letter spacing and kerning tables are tuned for rendering engines, not for offset lithography.

The result is a typeface that is neutral without being invisible. Inter does not call attention to itself, which is precisely what body text should do. It carries content without imposing personality. It reads cleanly at 14 pixels and remains legible at 11. It supports over 2,500 glyphs, covering Latin, Cyrillic, and Greek scripts. And it is open source, which means no licensing overhead and no vendor dependency.

The alternative was a system font stack. System fonts are fast to load and familiar to users. But they vary across platforms -- San Francisco on macOS, Segoe UI on Windows, Roboto on Android. That variance means your product looks different on every device. Inter eliminates that inconsistency. The product looks the same everywhere, and that consistency is itself a trust signal.

Good body typography is invisible. Users do not notice Inter. They notice when a product uses a font that feels wrong.

JetBrains Mono: Built for the People Who Read Code

A product for engineers must display code. The font used for that code communicates whether the product was built by engineers or by people who do not understand what engineers need. JetBrains Mono was designed by the company that builds IDEs used by millions of developers. It carries an implicit endorsement: this is what the people who make developer tools chose for themselves.

The technical merits justify the choice independently. JetBrains Mono has increased character height for improved readability at the same font size. It provides 139 code ligatures -- visual combinations for common programming sequences like arrow functions, inequality operators, and pipe chains. Its characters have clear distinction between easily confused glyphs: the number zero and the letter O, the number one and the lowercase L, the backtick and the single quote.

These distinctions are not aesthetic preferences. They are functional requirements. When a user is reading a system prompt or examining a code example in documentation, a single misread character can change the meaning of the entire block. JetBrains Mono eliminates that ambiguity through deliberate design choices at the glyph level.

JetBrains Mono ligatures can be toggled via CSS. Enable them for display code and disable them for editable code fields where cursor positioning must align with character boundaries.

SF Pro: Native Feel for System Contexts

SF Pro is Apple's system typeface. We use it selectively in contexts where the product should feel native to the Apple ecosystem: system notifications, menu bar elements, and contexts where the interface sits alongside macOS chrome. SF Pro is not our primary typeface. It is a contextual choice that signals awareness of the platform.

The decision reflects a broader principle: typography should respond to context. A code block should feel like code. Body text should feel like editorial content. System-level UI should feel like the operating system. Each context has a typeface that is most appropriate, and forcing a single font across all contexts creates subtle friction that users feel but cannot articulate.

The PEP Type Scale

A typeface is only as effective as the system that governs its use. The PEP type scale defines twelve steps, from Caption at 11 pixels to Hero at 80 pixels. Each step has a specific line height and letter spacing value. These are not arbitrary. They are calculated to maintain visual rhythm across the entire interface.

type-scale.css

/* PEP Type Scale — 12 Steps */
--font-caption:     11px / 1.45  /* +0.02em tracking */
--font-small:       12px / 1.5   /* +0.01em tracking */
--font-body-sm:     14px / 1.6   /* normal tracking  */
--font-body:        16px / 1.65  /* normal tracking  */
--font-body-lg:     18px / 1.6   /* normal tracking  */
--font-subhead:     20px / 1.4   /* -0.01em tracking */
--font-heading-sm:  24px / 1.35  /* -0.015em tracking */
--font-heading:     30px / 1.3   /* -0.02em tracking */
--font-heading-lg:  36px / 1.25  /* -0.025em tracking */
--font-display:     48px / 1.2   /* -0.03em tracking */
--font-display-lg:  64px / 1.1   /* -0.035em tracking */
--font-hero:        80px / 1.05  /* -0.04em tracking */

The pattern is consistent: as font size increases, line height decreases and letter spacing tightens. Small text needs generous spacing to remain legible. Large text needs tight spacing to hold together as a visual unit. This inverse relationship is well-established in typographic practice, but many design systems ignore it and apply a flat multiplier across all sizes. The result is headings that feel loose and captions that feel cramped.

Typography is the invisible foundation. When it is done well, users never think about it. They simply feel that the product is professional, trustworthy, and well-made. When it is done poorly, users notice immediately -- not consciously, but as a vague sense that something is off, that the product was not built with care.

We chose Inter, JetBrains Mono, and SF Pro because each is the best tool for its specific job. We built a twelve-step type scale because consistency at the system level produces coherence at the experience level. Typography is not decoration. It is infrastructure.

Key Takeaways

Inter provides screen-optimized, cross-platform body text that is neutral, legible, and consistent across devices.

JetBrains Mono offers ligatures, clear glyph distinction, and developer-trusted provenance for all code display contexts.

SF Pro is used selectively for system-level contexts where native platform feel matters.

The PEP type scale defines 12 steps with inversely correlated line height and letter spacing -- tighter as sizes grow, looser as sizes shrink.

Users do not notice good typography. They only notice bad typography. The goal is invisibility through precision.

Frequently Asked Questions

Common questions about this topic

Motion Design for AI Products: Less Is More Component Design for Conversational Interfaces

AI-Native Design