BrickclayDesign System

Typography

Our typographic system is rooted in one typeface, Inter Display. It brings rigor and consistency to every product screen, and room to push type into bold, expressive forms when the story calls for it.

Inter Display
Data(Intelligence)↗4.2x*
[Design] €£$!
©2026

Our typeface.

Inter Display by Rasmus Andersson.

Inter Display is a neo-grotesque sans serif drawn for screens. Its tall x-height, open shapes and wide set of weights let it work at every size, from a 96px headline to a 12px label.

We use three weights: Regular for the voice, Medium for structure, Bold for product titles.

AaRegular400
AaMedium500
AaBold700

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &@%$€£?!→

Distinguishing attributes

Hx
Tall x-heightLowercase stays readable at small sizes on screen.
ec
Open aperturesWide openings keep letters from closing up in dense text.
Il1
Clear letterformsCapital I, lowercase l and 1 never get confused.

Everyday usage.

Regular and Medium do most of the work.

Regular and Medium are our defaults for typesetting. A clear hierarchy of two weights removes guesswork and keeps the brand recognisable. Use this register wherever clear communication matters more than typographic expression.

Typesetting here should be rigorous and detail oriented. For leading and tracking, see Typesetting.

Brickclay website hero set in Inter Display
Web: Regular headline, Medium navigation and buttons.
Brickclay stationery
Stationery: one size, one weight per level.
Brickclay billboard
Out-of-home: a single Regular line, centred.
Case study

Turning scattered data into one clear view

We rebuilt reporting for a retail group so every team reads the same numbers, every morning.

Read the story →
  • Eyebrowlabel-sm · 12px · Medium
  • Headlineheading-xl · 48px · Regular · -1.5px
  • Bodybody-lg · 18px · Regular
  • Linklabel-md · 14px · Medium

Expressive usage.

Type as a graphic object.

For campaigns, social and events, leading and tracking can be read more loosely. Type becomes its own graphic element, pushed to create bold compositions. Always consider how the type sits with photography, motifs and the logo.

Ask yourself: does the type feel integral to the layout? Does it still read at a glance?

  • Scale→
  • Spacing→
  • Repetition→
  • Contrast→
  • Orientation→
  • Legibility→
DataIntelligence, built to scale.
Push size contrast hard. One word can carry the frame.
Build
what’s
next.
Tighten leading and tracking until lines lock together.
ClarityClarityClarityClarityClarity
Repeat a word to build rhythm. Let the last one land.
Structure with
creativity.
Pair weights and colors to set two ideas against each other.
BrickclayBoldness
Balance
Beyond
Turn type on its side to frame a composition.
AI

Digital, intelligent, human.

However far you push it, one line must read at a glance.
Brickclay social stories
Social: stacked headlines, tight leading.
Brickclay signage and wall graphic
Spaces: three words, one rhythm.

Typesetting.

Leading, tracking, kerning, hierarchy.

Good typesetting is invisible. These ranges come straight from our type tokens.

Leading

Display lines sit between 100% and 115% of the type size. Headings open up to about 140%, and body copy to about 155%.

Systems
over
trends
85%. Too tight, lines crowd each other.
Systems
over
trends
100%. Display default.
Systems
over
trends
115%. Upper limit for display.

Tracking

The bigger the type, the tighter the tracking. Body and labels stay at 0.

72px · -2pxData Intelligence
48px · -1.5pxSystems over trends
28px · -0.75pxTrusted by leading organizations
18px · 0We design and build digital products that grow with you.

Kerning

Keep the font’s built-in kerning on everywhere. Adjust pairs by hand only on display lines above 96px.

AVATAR Today
Kerning off
AVATAR Today
Kerning on

Hierarchy

Two scales share one typeface. Expressive is for marketing and storytelling, Productive for screens and tools.

Expressive scale
display-xl96px / 96px · 400
Data Intelligence.
display-lg72px / 82px · 400
Your Digital Transformation Partner
display-md64px / 74px · 400
Design That Sells
heading-xl48px / 67px · 400
Systems over trends
heading-lg28px / 40px · 500
Trusted by Leading Organizations
heading-md20px / 26px · 500
Clarity over complexity
body-lg18px / 28px · 400
We combine certified data and AI expertise with award-winning design.
body16px / 25px · 400
Founded in 2016, Brickclay helps organizations move from vision to execution.
eyebrow16px / 1.4 · 500
Proven by the Market
caption14px / 20px · 400
Headquartered in Boston, USA · 100+ experts · Since 2016
Productive scale
title-lg24px / 32px · 700
Invoices
title-md20px / 28px · 700
Payment details
title-sm16px / 24px · 700
Billing contact
body-md14px / 20px · 400
Your next invoice is generated on the 1st of each month.
body-sm12px / 16px · 400
Updated 2 minutes ago
label-md14px / 20px · 500
Save changes
label-sm12px / 16px · 500
Overdue
code13px / 20px · 400
--action-primary-bg

Typeface features.

OpenType, switched on with purpose.

Inter Display ships with OpenType features that solve real problems in product and data work. Left is the default, right is the feature on.

OffOn
Tabular numbersLines up figures in tables and dashboards.font-feature-settings: "tnum"
1,111.11
9,876.541,111.11
9,876.54
FractionsBuilds true fractions from plain digits.font-feature-settings: "frac"
1/2 3/4 7/81/2 3/4 7/8
Case-sensitive formsCentres brackets and dashes on capitals.font-feature-settings: "case"
(BRICK) – @(BRICK) – @
Slashed zeroTells zero apart from capital O in codes.font-feature-settings: "zero"
ID 0O0-200ID 0O0-200
Clear letterformsSeparates I, l and 1 in passwords and data.font-feature-settings: "ss02"
Il1 IllIl1 Ill
Contextual arrowsTurns typed arrows into true arrows.font-feature-settings: "calt"
Next -> Back <-Next -> Back <-

Incorrect usage.

Keep the system intact.

  • Bold headlines
  • Wide capitals
  • Faux italics
  • Stretching
  • Low contrast
  • Other typefaces
Systems over trends Do not set marketing headlines in Bold.
Systems Do not track out capitals for headlines.
Systems over trends Do not slant or fake styles the font does not have.
Systems Do not stretch or squash type.
Systems over trends Do not set type in tints that fail contrast.
Systems over trends Do not mix in other typefaces.

Languages.

Latin, Greek and Cyrillic.

Inter Display covers Latin, Greek and Cyrillic scripts, including Vietnamese. For scripts it does not cover, such as Arabic or Urdu, use the platform’s system font at matching sizes.

English

We design systems that scale.

Español

Diseñamos sistemas que crecen.

Deutsch

Wir gestalten Systeme, die wachsen.

Français

Nous concevons des systèmes évolutifs.

Türkçe

Ölçeklenen sistemler tasarlıyoruz.

Ελληνικά

Σχεδιάζουμε συστήματα.

Русский

Мы создаём системы.

Tiếng Việt

Chúng tôi thiết kế hệ thống.

Resources.

Everything you need to set type.

Downloads Inter Display Regular (WOFF2) Inter Display Medium (WOFF2) Inter Display Bold (WOFF2) Full family and desktop files (rsms.me/inter)