Ultimate Performance Academy

Typography

The Ultimate Performance Academy typography system pairs three typefaces across a strict 8-pixel-divisible scale. Inter carries every on-screen surface, JetBrains Mono labels technical UI chips and Bebas Neue holds the logo wordmark. Every size in the scale meets WCAG 2.1 AA for contrast and readability.

Branding Fonts

The brand uses three typefaces, each with a specific job. Inter handles the interfaces, websites and marketing pages. JetBrains Mono appears in compact technical labels like property tags, status chips and keyboard hints. Bebas Neue carries the UPA logo and logo-adjacent branding.

Inter
The primary typeface. Inter sets every heading, body paragraph, button, form field and navigation label across the website, supporting applications, email templates and internal tools. Chosen for its high x-height, strong numerals and excellent screen legibility at small sizes.
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Get Inter on Google Fonts →

JetBrains Mono
A monospaced typeface reserved for structured technical content. Used inside property labels, status tag pills, keyboard shortcut hints, inline code and anywhere even character widths help a reader scan rapidly. Not used for prose, headings or buttons.
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Get JetBrains Mono on Google Fonts →

Bebas Neue
A condensed display typeface used for the UPA logo and logo-adjacent branding. Inter handles every page heading, body paragraph, button and UI element across the system.
Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Get Bebas Neue on Google Fonts →

Type Scale

An 8-pixel-divisible type ladder from 14 pixels for supporting metadata up to 72 pixels for the display wordmark. Body copy sits at 16 pixels. Headings step up in clean 8-pixel intervals at 24, 32, 40, 48, 56 and 64 so every surface inherits the same vertical rhythm.

Display Headline
72px, Black 900, line-height 1.1, letter-spacing -0.03em. Logo wordmark only.
Hero Headline
64px, Extrabold 800, line-height 1.1, letter-spacing -0.02em. Marketing hero headlines.
Marketing Headline
56px, Extrabold 800, line-height 1.15, letter-spacing -0.02em. Landing page section headers.
Feature Heading
48px, Extrabold 800, line-height 1.2, letter-spacing -0.02em. Primary feature blocks.
Page Title H1
40px, Extrabold 800, line-height 1.2, letter-spacing -0.015em. Default in-app page titles.
Section Heading H2
32px, Extrabold 800, line-height 1.25. Section titles within a page.
Card Heading H3
24px, Extrabold 800, line-height 1.3. Card titles, subsection labels, modal headers.
Body text sits at sixteen pixels with a line-height of 1.6 for comfortable long-form reading.
16px, Regular 400, line-height 1.6. Default paragraph copy. Medium 500 for UI labels.

The 72-pixel Display size pairs with Inter Black 900 for high-impact marketing moments. All H1 through H6 headings use Inter Extrabold 800. Body paragraphs use Inter Regular 400 and UI labels use Inter Medium 500. Body copy should not fall below 16 pixels.

In Context

The scale composed as a real page would use it. A page title at 40 pixels, a 20-pixel subheadline beneath and 16-pixel body paragraphs with the system's standard vertical spacing between each block.

Build The Business You Deserve

A supporting subheadline in Inter Medium at 20px. Sits directly beneath the page title, carries the hook forward and leads the reader into the body copy.

Body paragraphs run at 16px with a line-height of 1.6. Long-form copy gets generous leading so the eye can land cleanly on each line. Paragraph spacing is 1.5em so ideas stay separated without breaking the flow of the argument.

A second paragraph demonstrates the rhythm between blocks of body text. Containers are capped at 50 to 75 characters per line to keep long-form copy comfortable. Inter's x-height carries readability all the way down to 14px for supporting metadata.

Title at 40 pixels Extrabold, subheadline at 20 pixels Medium, body at 16 pixels Regular. A 16-pixel gap sits between title and subheadline, and a 24-pixel gap separates the subheadline from the first body paragraph. This same rhythm repeats on every page.

Rhythm

Line-height and letter-spacing follow the size. Larger type uses tighter leading and slightly negative tracking for a condensed, confident read. Smaller type uses more generous leading so body lines stay easy to scan.

  • Name
    72, 64, 56
    Description

    Line-height 1.1 to 1.15, letter-spacing -0.02em to -0.03em. Tight and compressed for impact.

  • Name
    48, 40
    Description

    Line-height 1.2, letter-spacing -0.015em to -0.02em. Slight negative tracking at heading weights.

  • Name
    32, 24
    Description

    Line-height 1.25 to 1.3, letter-spacing 0em. Neutral tracking at sub-heading sizes.

  • Name
    16 body
    Description

    Line-height 1.6, letter-spacing 0em. Generous leading for long-form readability.

These values apply automatically through the shared prose configuration. Individual components should not override line-height or letter-spacing on a per-instance basis.

Accessibility

The minimum requirements every text element in the system meets, based on WCAG 2.1 Level AA.

  • Name
    Minimum contrast
    Description

    4.5:1 for body text. 3:1 for large text at 24px and above, or 19px and above when bold.

  • Name
    Minimum size
    Description

    16px for body copy. 14px floor for supporting labels and metadata only.

  • Name
    Line length
    Description

    50 to 75 characters per line for comfortable reading. Cap long-form containers accordingly.

  • Name
    Paragraph spacing
    Description

    1.5em between paragraphs. Enough air to separate ideas without breaking flow.

Every size in the scale meets WCAG 2.1 AA against the brand palette. Yellow 400 is reserved for accents, highlights and calls to action and does not carry body copy. Default text pairings are Zinc 900 on white in light mode and Slate 200 on Black 950 in dark mode.