Typography
Your typographic choices can make or break the legibility, visual hierarchy, and brand cohesion of your interface. In Appetite UI, we’ve streamlined fonts and text styles to cover everything from large impactful headings to small, functional labels, all using the Inter typeface. Below is an overview of our type system, paired with best practices for keeping text both appealing and accessible.
Overview of text styles
Appetite UI organizes text into five main categories—Display, Headline, Title, Body, and Label—each available in Large, Medium, and Small sizes (minimum font size is 10 pt) with Bold, Semibold, Medium, and Regular weights. Stick to these base styles for consistency and clarity.
Display
Sizes: Large, Medium, Small
Purpose: High-impact text for short statements on larger or feature-rich screens. Use sparingly for visual emphasis (e.g., hero text, big callouts).
Tip: Adjust optical sizing (line spacing, letter spacing) for optimal legibility.
Headline
Sizes: Large, Medium, Small
Purpose: Primary headings for sections or key areas in your app. Works well on smaller screens that still need prominent text.
Tip: Be mindful of line height so that headlines remain readable and distinct.
Title
Sizes: Large, Medium, Small
Purpose: Secondary headings that maintain prominence but don’t overpower the main header.
Tip: Keep text concise, especially if using more stylized fonts.
Body
Sizes: Large, Medium, Small
Purpose: Standard paragraphs or long-form content. Prioritize comfort and clarity—especially on smaller phones.
Tip: Avoid decorative typefaces here. Stick with Inter’s core weights for maximum readability.
Label
Sizes: Large, Medium, Small
Purpose: Small text elements like button text, captions, or minor details (e.g., taglines).
Tip: Ensure good contrast and clear spacing around labels so they remain legible at a glance.
Ensuring legibility
Size & weight
Use at least 10 pt for any text on mobile. For very thin fonts, consider sizing up to improve clarity.
Inter is built for on-screen readability—Regular, Medium, Semibold, and Bold offer strong legibility without straining the eyes.
Test in various contexts
Simulate bright daylight, low-light rooms, or tinted screen modes (e.g., night shift).
If text looks too cramped or faint, increase size or contrast—or switch to a thicker weight.
Avoid very light fonts
Ultralight or Thin styles can be stylish but often hinder quick reading. Keep them for display text or large-format visuals, if at all.
Conveying hierarchy
Size differentiation
A clear step between Display, Headline, Title, and Body helps users scan your content quickly.
Avoid mixing multiple typefaces—sticking to Inter ensures a coherent look.
Weight & color
Highlight key text with a heavier weight or subtle color shift. Keep things consistent across screens.
When people adjust their device’s text size, let your style definitions maintain relative hierarchy (i.e., keep your headings bigger than body, etc.).
Focus on what matters
If text scaling is turned on, high-priority content (like article text) usually needs more accommodation than minor labels (like a tab title).
Minimizing typeface variety
One font family is enough
Inter’s broad weights and widths can tackle nearly all UI needs. Incorporating multiple fonts can clutter your design and confuse users.
When to add another typeface
Rarely, you might add a decorative typeface for a brand signature or special event. Limit its usage to keep the UI tidy and consistent.
By leveraging Display, Headline, Title, Body, and Label styles in Appetite UI, you ensure consistent typography across screens—from large hero text to subtle labels. Inter provides a clean, modern feel, while varied weights and sizes let you craft a clear visual hierarchy without resorting to multiple fonts.
Keep testing your text in different environments, respect minimum sizes (≥ 10 pt), and be mindful of color contrast. With these fundamentals, your app’s typography will stay accessible, readable, and on-brand—fostering a smooth user experience that supports your product’s goals.