Big Shoulders
Make room for better.
Aa Bb Cc · 0123456789 · À é ç ã £ € $ & @
Big Shoulders 800 for short headlines. Keep it out of continuous reading. Avoid synthetic italics and never compress the letters manually.
--6am-font-displaySection reviewNeeds work2 met · 1 to improve · 1 to review
What is in place, what needs improving, and what still needs a closer look. Each status refers only to the criterion below; it is not approval of the whole section.
- Meets criterionDisplay, body, accent and mono fonts have defined roles.
The catalog identifies all four families, weights and fallbacks.
View supporting material ↗ - Needs workThe type scale works consistently across pages and screen sizes.
Nine pilot roles now share responsive sizes and exports. Migrating remaining page-specific heading rules and validating all contexts remains open.
- Awaiting reviewLong content and unavailable fonts do not break the layout.
Review long headings, zoom and blocked font loading in the intended languages.
- Meets criterionHierarchy, reading rules, context guidance and reusable specifications are available.
Nine roles, four family responsibilities, live text and fallback previews, alignment examples and AI/CSS/JSON exports are implemented. Font download packaging is still pending.
Read typography specifications ↗
03 / Typography
Presence in the headline. Ease in every word.
Our type has a job to do: get attention, explain the useful detail and make the next step clear. Start with Big Shoulders and Onest; bring in the other voices only when they help.
Four families. Clear responsibilities.
Two families carry most of the work. An italic accent adds warmth; mono gives technical detail its own place.
Onest
Your next customer needs to understand what you do and how to contact you.
Aa Bb Cc · 0123456789 · À é ç ã £ € $ & @
Onest 400 for reading, 600 for labels and 700 for occasional emphasis. Use only weights loaded by the project.
--6am-font-bodyFraunces
A little more human.
Aa Bb Cc · 0123456789 · À é ç ã £ € $ & @
Fraunces 500 in true italic. The project loads italic only; do not simulate a roman style or use it in forms.
--6am-font-accentGeist Mono
COLOR.ACCENT / #E3FF04
Aa Bb Cc · 0123456789 · À é ç ã £ € $ & @
Geist Mono 400 for values and code, 500–600 when needed. Align comparable values to the same edge.
--6am-font-monoA hierarchy you can actually use.
These pilot web roles define size, weight, line height, tracking and reading width. Responsive values grow between 360 and 1200 px viewports; fixed roles keep their size. REM values follow the reader’s font settings.
The px labels assume a 16 px root font size. “ch” is a font-relative width, not a fixed character count. Keep the correct HTML heading level even when a different visual role is needed.
Opening headline
One clear promise. Aim for two or three lines; edit before making the type smaller.
- Size
- 44–76 px
- Line height
- 1.02
- Tracking
- -0.02 em
- Max. width
- 20 ch
--ds-type-display-sizeMake room for better.
Section title
Introduce the next subject. Keep visual size separate from semantic heading level.
- Size
- 28–40 px
- Line height
- 1.12
- Tracking
- -0.02 em
- Max. width
- 28 ch
--ds-type-section-sizeA website people can use.
Subheading
Explain a group of content or name a useful detail.
- Size
- 22–28 px
- Line height
- 1.3
- Tracking
- 0 em
- Max. width
- 40 ch
--ds-type-subheading-sizeClear pages. A simpler next step.
Lead paragraph
Bridge the headline and the detail. Keep it to a short paragraph.
- Size
- 18–22 px
- Line height
- 1.5
- Tracking
- 0 em
- Max. width
- 55 ch
--ds-type-lead-sizeHelp people understand your business and take the next step.
Body copy
Use for explanations and continuous reading. Keep a comfortable line length.
- Size
- 16 px
- Line height
- 1.6
- Tracking
- 0 em
- Max. width
- 65 ch
--ds-type-body-sizeYour next customer needs to understand what you do and how to get in touch. Start with the information they need, then make the next step easy to find.
Labels and actions
Use sentence case and a clear action. Let labels wrap; keep form inputs at 16 px or more.
- Size
- 16 px
- Line height
- 1.4
- Tracking
- 0 em
- Max. width
- 40 ch
--ds-type-label-sizeGet a proposal
Caption
Explain supporting details. Never hide essential instructions in small print.
- Size
- 14 px
- Line height
- 1.5
- Tracking
- 0 em
- Max. width
- 65 ch
--ds-type-caption-sizeA working example, ready to review.
Metadata and code
Reserve for versions, tokens and technical values. Do not set paragraphs in mono.
- Size
- 12 px
- Line height
- 1.6
- Tracking
- 0.02 em
- Max. width
- 65 ch
--ds-type-metadata-sizeVERSION 0.7.0 / #E3FF04
Editorial accent
Use a short italic phrase once in a composition. Keep the main message in the primary families.
- Size
- 28–40 px
- Line height
- 1.2
- Tracking
- 0 em
- Max. width
- 28 ch
--ds-type-accent-sizeA little more human.
Try the words you will really use.
Change the role, enter your own copy and compare brand fonts with the document fallback. The width controls simulate a text frame, not a different device viewport.
Make room for better.
A fallback preserves meaning and hierarchy, but changes letter widths and line breaks. The simulated document fallback uses system fonts; it does not unload the website fonts.
The hierarchy, working together.
Align the label, headline, introduction and action to one reading edge. The guides mark the text column, not font-specific cap-height measurements.
FOR YOUR BUSINESS
Make your next step clearer.
A useful website starts with a conversation.
Tell us what your customers need to understand. We’ll help turn that into pages that explain your work and make it easier to get in touch.
Explore our servicesExample composition · web
Give the words room to breathe.
A clear next step, with room to read.
Sentence case, natural spacing and a clear reading edge.A CLEAR NEXT STEP, WITH ROOM TO READ.
Long uppercase text and tight spacing make reading harder.- Left-align paragraphs and related labels. Center only a short, self-contained statement; avoid justified body text.
- Aim for roughly 45–75 characters per line in long reading, using the 65ch body measure as a starting point. Let narrow screens wrap naturally.
- Keep body tracking at zero and line height at 1.6. Tight headline spacing belongs to short display copy; it should never make accents or letters collide.
- Use sentence case for headlines, labels and actions. Uppercase is for short metadata; avoid paragraphs in capitals.
- Break headlines at a meaningful phrase. Avoid a single stranded word when practical, but do not force desktop line breaks onto mobile screens.
- Use one emphasis at a time: weight, a short italic phrase or a solid highlight. Do not stretch letters, outline body copy or apply gradients to text.
- Keep text containers flexible. Check longer translations, accented characters, user text enlargement and line-spacing overrides without clipping or hiding content.
The same voice, in different formats.
Web pages and forms
Use the responsive scale on this page. Keep one h1 per page, then a logical heading outline. Use Onest for instructions, errors and actions. Keep important text as HTML.
Social posts and Stories
Use Big Shoulders for a short headline and Onest for the detail. Follow the social template sizes and safe areas; web CSS pixels are not a 1080 px canvas specification. Check the exported post at phone size.
Social mediaPresentations and print
Keep a strong title/body contrast. For a pilot slide, start at 36–48 pt for titles and 20–24 pt for body, then check from viewing distance. For printed reading, start at 11–12 pt and proof the actual format; these are starting points, not approved print minima.
Email and shared documents
If brand fonts are unavailable, use Arial Bold for headings and Arial Regular for body. Use Georgia Italic for an optional editorial phrase and Courier New for code. Recheck line breaks and page count after substitution.
Ready for your team and your AI.
Copy the complete type guide or use the structured roles and CSS tokens. Font-family declarations do not install fonts. The site serves its font files through next/font; a portable font download package is still pending.
Pilot specification. Applying these roles consistently across every page, checking all fallback environments and preparing font packages remain open work.