Typography

Type is the heart of any interface. Puppertino uses Apple’s text style system from the Human Interface Guidelines, with sizes, weights, line heights, and letter spacing that match the native scale.

The system font (San Francisco) loads automatically on Apple devices through -apple-system. On other platforms, the stack falls back through Helvetica Neue and Inter so the rhythm stays close.

Type scale

The full iOS 27 text style ladder, at the default Large content size. Each style has a specific size, weight, line height, and letter spacing tuned for legibility at that size. Tracking is tightest at 17px (Body and Headline, -0.43px), opens up toward the small captions, and turns slightly positive again on Large Title and Title 1. This is SF Pro’s optical sizing, and it is what makes Apple’s typography feel right.

Apply any class directly to an element.

Emphasized and italic

Every style has an Emphasized variant. Add .p-emphasized to a style class: Large Title, Title 1, and Title 2 go to 700, and every other style goes to semibold (600). Headline is already semibold, so it doesn’t change. Add .p-italic for the italic variants of Body through Caption 2.

<h1 class="p-large-title-2 p-emphasized">Library</h1>
<p class="p-body p-emphasized">Your changes are saved.</p>
<p class="p-footnote-2 p-italic">Edited just now</p>

Large Title is Regular (400) by default. Consider the Emphasized variant for a page’s main heading, where it needs to anchor the layout. Inside .p-type, h1 is already the Emphasized Large Title.

Using the scale

Apply a class directly to any element.

<h1 class="p-large-title-2">Welcome to Puppertino</h1>
<p class="p-body">A CSS framework for Apple-style interfaces.</p>
<span class="p-caption-1">Updated 2 minutes ago</span>

Or wrap a section in .p-type to get sensible defaults for headings and paragraphs without needing individual classes.

<article class="p-type">
  <h1>Page title</h1>
  <p>Body text inside this section automatically uses the Puppertino type scale.</p>
  <h2>A subsection</h2>
  <p>Headings, paragraphs, and code follow the system.</p>
</article>

Font weights

San Francisco supports nine weights. Puppertino exposes all of them as utility classes.

Avoid weights below 300 and above 700 in body text. They are for display use only.

Letter spacing

Apple sets letter spacing per size. The type styles already include the right tracking, so avoid adding tracking utilities to them. The utility classes are for plain text outside the scale.

<span class="p-tracking-tight">Tight tracking for headlines</span>
<span class="p-tracking-snug">Snug tracking for subheadings</span>
<span class="p-tracking-normal">Normal tracking for body</span>
<span class="p-tracking-wide">Wide tracking for small caps</span>
<span class="p-tracking-wider">Wider tracking for labels</span>

Font stack

The default font is the system font on Apple devices, with a graceful fallback chain.

font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "SF Pro Display", "Inter", "Helvetica Neue",
             Helvetica, Arial, sans-serif;

Use --p-font for body text, --p-font-display for headings, and --p-font-mono for code.

Backwards compatibility

The legacy .p-layout, .p-large-title, .p-headline, .p-callout, .p-subhead, .p-footnote, and .p-caption classes from earlier versions of Puppertino continue to work. Pages that use them do not need to change.

The new classes use a -2 suffix where they would conflict (.p-large-title-2, .p-headline-2, etc.) so both systems coexist.

Accessibility

Apple’s text styles are designed to support Dynamic Type on iOS, where people can scale text to meet their needs. On the web, use relative units (rem, em) where possible and avoid hard-capping line lengths so text reflows comfortably at larger sizes.

Always check contrast against your background. Apple’s primary text uses 85% opacity, which gives just over 4.5:1 contrast on white at 17px. Below 17px, prefer the higher-opacity text colors.