Typography

The typeface

CRAFTSMAN+ sets everything in Inter, self-hosted as a variable font. One family across marketing, product, and documentation keeps the brand quiet and coherent, which is the point. The voice is calm; the type should be too.

Enable the stylistic sets that ship with the brand:

font-family: var(--font-sans);
font-feature-settings: "ss01", "ss02", "cv11";

These features give Inter its open digits and disambiguated glyphs. They are part of the brand setting, not an option.

For code, tokens, and technical values, use JetBrains Mono. This is a proposal pending formal adoption; it appears throughout this site so you can judge it in use.

The scale

The scale is fluid on the web: display and heading sizes are clamp() expressions that track the viewport, so type is never stepped awkwardly between breakpoints. Body sizes are fixed.

In design tools, use the fixed sizes marked in pink on each step below. They are the large end of each fluid range: type is authored at full size and the web scales it down, never the reverse.

Weights are named the way font menus name them: 400 is Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold, 900 Black. Tracking is given as a percentage of the em for design tools; Figma takes it directly as %.

One system, every tool

The scale does not fork per tool. It is one system in three expressions, split by how the type is read:

• Web reads the fluid clamp() sizes; they are already in the CSS tokens.
• Design documents share one ladder. Figma, Photoshop, Illustrator, and statics all use the fixed px sizes above, and they agree pixel-for-pixel. The ladder is authored for canvases 1440px wide or wider; on narrower artboards, multiply by canvas width over 1440 and round (a 1080-wide static runs display 69, H1 42, H2 27). Body copy never drops below 13px regardless of canvas.
• Presentations get their own point ladder, because Google Slides measures a 960 x 540 point canvas and decks are read at distance, which puts a floor under body sizes that linear scaling would break:

On a 1920 x 1080 pixel artboard, presentation values double. Deck workflow lives on the Slides page.

Every step is shown below at its actual rendered size; type your own specimen to see it across the whole ramp, and copy any step’s CSS.

Tracking

Inter needs negative tracking as it grows and positive tracking as it shrinks.

Never track body copy negative, and never letterspace lowercase text. Eyebrows are always uppercase with wide tracking; they are the only place the brand shouts, and they do it quietly.

Leading

Leading is proportional to size, and it inverts as type grows: big type gets tight, small type gets air. The stripes below are the actual line boxes; what sits between the stripes is the leading.

In design tools, set line height as a percentage, never Auto: Auto in Figma and Slides is looser than the system and makes headlines float apart. The full ladder runs from 102% at display down through 155% for body, per the table above.

Weights & styles

The system spans 400 through 900, matching craftsmanplus.com, the reference implementation. Body copy is always 400 and never lighter. 500 carries ledes, buttons, and interface emphasis. 600 sets labels and sub-headings, 700 headings, 800 section titles, and 900 is the hero display weight.

The light cuts, 100 through 300, are never used at any size. The website does not even load them, and light body copy falls below the contrast bar on dark grounds. If existing material sets body text in ExtraLight, correct it to 400.

Italic is available across every weight and reserved for the rare cited title or borrowed term; the brand voice does not lean on italics for emphasis.

Every weight in both styles, live below. Click a row to copy its CSS.

Text casing

Title Case keeps minor words lowercase: a, an, the, and, or, with, of, to, for. Everything else capitalizes, including the first and last word regardless of length.

Two boundaries hold the system. All caps belongs to eyebrows and labels only; a headline set in all caps is shouting, and the voice does not shout. Stylized all-lowercase is not part of the brand in any context.

Company and product names override casing everywhere: CRAFTSMAN+, CM+, PLAY, PRISM, INTELLIGENCE, and ANALYTICS keep their caps in headlines, buttons, and body alike. See Naming.

Color in text

Type carries color by a small set of rules, shown live below.

Eyebrows. CRAFTSMAN ORANGE on monotone grounds. On a heavy gradient ground, eyebrows drop to solid CRAFTSMAN BLACK or CRAFTSMAN WHITE, whichever contrasts; the ground already owns the color.

Gradient text. A gradient may fill a word or phrase inside a headline, never the full headline and never running text. The CRAFTSMAN+ GRADIENT is the default; the INTELLIGENCE gradient appears only on AI surfaces.

The ground rule. Gradient text sits on solid MIDNIGHT or on NEBULA, the CRAFTSMAN+ MINIMAL GRADIENT. NEBULA is the one gradient exception: it is near-black and reads as atmosphere, so the text gradient still carries. Never place gradient text on any other gradient background.

Body copy. CRAFTSMAN WHITE or CRAFTSMAN GREY on dark grounds, always solid, never gradient, never orange.

Hierarchy in practice

Lead with the point, typographically as well as editorially. One display size per page. Headings step down without skipping levels. If two adjacent text blocks compete, drop one down the scale rather than pushing the other up.