Huxberry Brand guidelines

Chapter 04 of 12

Typography

Plain text PDF Source

On this page
  1. One family: Satoshi
  2. The five rules
  3. Web scale
  4. Print and social sizes
  5. Numbers, prices and units
  6. Don't

One family: Satoshi
Typeface Satoshi, by Indian Type Foundry
Why A clean, modern sans with soft, open shapes. It reads as calm and premium at large sizes and stays very legible at small ones. One family keeps every page, post and brochure consistent
Weights we use Regular 400 (headlines and body), Medium 500 (small headings, buttons, menus, badges), Bold 700 (eyebrows, prices, table headers)
Download Free from fontshare.com/fonts/satoshi
Licence ITF Free Font License. Free for commercial use in web, print, social, video, packaging and PDFs. Staff may share the files internally. Do not post the font files on a public website or send them to other companies: agencies and printers download their own copy from Fontshare
Web <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap">
Fallback Arial (email, Office documents, any system without Satoshi)

Arabic: Satoshi has no Arabic letters. See 09 · Social media for the Arabic pairing.

The five rules

  1. Headlines are Regular, never bold. Size and space make a headline, not weight. A Bold or Black headline is always wrong.
  2. Tight headlines, open body. Headlines track in slightly (-0.02 to -0.025em). Body copy stays at 0 with a 1.6 line height.
  3. Sentence case everywhere: headlines, buttons, badges, menus. Capitals only for small eyebrow labels, and the style applies them, not the keyboard.
  4. Nothing small. Body text 16 px minimum on screen, nothing under 14 px anywhere. In print, nothing under 7.5 pt.
  5. Hierarchy from size and weight, not colour. Headings Forest Ink, body Slate Green, eyebrows Sage. White on any green or dark ground.

Web scale

Style Weight Size Line height Tracking Colour
Hero headline Regular 400 40 px phone, up to 56 px desktop 1.08 -0.025em Forest Ink, or White on a dark panel
Page title, product name Regular 400 40 px 1.1 -0.025em Forest Ink
Section heading Regular 400 28 px phone, 40 px desktop 1.15 -0.02em Forest Ink
Card heading, product card title Medium 500 18 px (up to 24 px for feature cards) 1.3 -0.01em Forest Ink
Intro paragraph Regular 400 17 to 18 px 1.6 0 Slate Green
Body Regular 400 16 px 1.6 0 Slate Green
Small, footer, caption Regular 400 14 px 1.5 0 Slate Green
Menu Medium 500 15 px (the top row never wraps) 1.3 0 Forest Ink
Button Medium 500 15 to 16 px, sentence case 1 0 White on Sage
Eyebrow Bold 700 14 px, caps 1.6 0.08em Sage (White on dark)
Badge, tag Medium 500 14 px, sentence case 1 0 White on Deep Green
Price Bold 700 16 to 22 px 1.2 0 Forest Ink

Text sizes are identical on every page. A section heading on the homepage is the same size as one on a product page.

The same rules, scaled: print sizes (brochures, booklets, leaflets, specification sheets) are in 08 · Print; social and video sizes are in 09 · Social media.

Numbers, prices and units

  • Prices: AED 2,300 (code, space, comma thousands, no decimals unless needed). On the website, the theme's dirham symbol is fine inside price widgets.
  • Sizes: 160 × 200 cm with a true multiplication sign and a space either side.
  • Heights and weights: 27 cm, 2.4 kg with a space before the unit.
  • Ranges: 7 to 9 in sentences, an en dash 7–9 in tables only.
  • No em dashes anywhere in Huxberry copy. Use a full stop, a comma or a colon.

Don't

  • Don't use Fraunces, Inter, Figtree, Montserrat, Georgia or any serif. Arial is a fallback only.
  • Don't set headlines in Bold or Black, or thicken them with a stroke.
  • Don't type in capitals. Caps come only from the eyebrow style.
  • Don't letterspace lowercase text.
  • Don't go under 14 px on screen or 7.5 pt in print.
  • Don't centre more than three lines of body copy.
  • Don't use colour to make something look important. Use size, weight or space.