Typography

Typography is a critical element to develop content hierarchy, organization, and alignment.

Font

The main typeface used by Calcite Design System is Avenir Next. The remaining typeface font stack includes the system default and sans-serif fonts.

You may also replace the font with the font-family CSS property should the default typeface not meet your application's needs.

Use dark colors for code blocksCopy
1
2
3
body {
  font-family: "Roboto";
}

Colors

Consistent use of a limited set of colors can enforce hierarchy within your application.

    Light mode
  • --calcite-color-text-1#151515
  • --calcite-color-text-2#4A4A4A
  • --calcite-color-text-3#6A6A6A
    Dark mode
  • --calcite-color-text-1#FFFFFF
  • --calcite-color-text-2#BFBFBF
  • --calcite-color-text-3#9F9F9F

Size & weight

SizeWeightLightNormalMediumBoldLine-heightDefaultWrap

The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Type pairing

Pairing size
SmallLarge

TypeColorSizeWeightLine heightSpace below
Heading--calcite-color-text-1--calcite-font-size-6--calcite-font-weight-medium1.2512px
Subeading--calcite-color-text-2--calcite-font-size-3--calcite-font-weight-medium1.2512px
Paragraph--calcite-color-text-3--calcite-font-size-3--calcite-font-weight-normal1.2524px
Tertiary--calcite-color-text-3--calcite-font-size-2--calcite-font-weight-normal1.375
Heading lorem ipsum dolor
Subheading ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tertiary text

Code face

Rather than load a specific font for code blocks, the Calcite Design System is designed to use a system font. For users that have Consolas installed, it is the preferred face for code blocks. Designed by Microsoft's Lucas DeGroot, Consolas is a clean, readable, and simple monospace face for documenting code blocks.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
<nav class="breadcrumbs">
  <a href="#" class="crumb">Thing</a>
  <span class="crumb">Thing</span>
  <a href="#" class="crumb">Thing</a>
  <a href="#" class="crumb">Thing</a>
  <a href="#" class="crumb is-active">Current</a>
</nav>

Type

To use type effectively set line height, size, and spacing to inform hierarchy and order. Well balanced interfaces rely on clear typography. Using lines, borders, and panels to separate content can lead to overly dense or "heavy" interfaces.

Correct Type Hierarchy
Do use text size, space, grayscale/color, and weight to structure page content hierarchy.
Incorrect Type Hierarchy
Avoid relying on hr, underlines, or borders to create hierarchy within your text.

Hierarchy

Set the hierarchy of your content to dictate the size and presentation of your text. Effective use of labels, title, and body copy can help users quickly ascertain what is important.

Correct Type Spacing
Do use adequate line height, text size and space to infer hierarchy.
Incorrect Type Spacing
Avoid using the same line height, size and spacing for everything.

Brevity

Writing concise, easily readable copy makes your application easier to understand for users. Avoid using lengthy or overly technical text for prompts or actions.

Correct Type Brevity
Do prefer brevity over verbosity.
Incorrect Type Brevity
Avoid presenting users with hard to decipher or complex copy.

Font types for different languages

The main typeface used by Calcite Design System is Avenir Next. Any languages that use the Latin, Cyrillic, or Greek alphabets should render well with the default type. However, it does not contain characters required by several languages such as Arabic, Chinese, and Vietnamese. Most of the languages not covered by Avenir Next will be set by the browser's default font, or if not set to a San Serif font, so it will be distinct enough for your users.

The exception is Vietnamese, which uses standard Latin characters in addition to glyphs from the Latin Extended Additional set which are missing. As a result the missing characters are rendered in a different font, which looks like a bug to the user. For this reason, Lucide Grande is set as the font family for pages in Vietnamese where the html document's lang attribute is set to vi.

Explore more with Calcite Design System's Localization.

BCP 47LanguageExample characters
arArabicصِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت — يَحظى الضَجيعُ بِها نَجلاءَ مِعطا
bsBosnianSva ljudska bića rađaju se slobodna i jednaka u dostojanstvu i pravima
csCzechPříliš žluťoučký kůň úpěl ďábelské ódy
daDanishQuizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon
deGermanVictor jagt zwölf Boxkämpfer quer über den großen Sylter Deich
elGreekΤαχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός Takhístè alôpèx vaphês psèménè gè, draskelízei ypér nòthroý kynós
esSpanishBenjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú
etEstonianPõdur Zagrebi tšellomängija-följetonist Ciqo külmetas kehvas garaažis
fiFinnishFahrenheit ja Celsius yrjösivät Åsan backgammon-peliin, Volkswagenissa, daiquirin ja ZX81:n yhteisvaikutuksesta
frFrenchVoyez le brick géant que j’examine près du wharf
kaGeorgianღმერთსი შემვედრე, ნუთუ კვლა დამხსნას სოფლისა შრომასა, ცეცხლს, წყალსა და მიწასა, ჰაერთა თანა მრომასა
heHebrewשפן אכל קצת גזר בטעם חסה, ודי לְדַפדֵף הפתרונות שלי עֶזרָה הֲגָנָה
hiHindiलाभो सुचना उद्योग परिवहन विनिमय बाटते काम अधिकार निर्माता विभाजनक्षमता सादगि हुआआदी विश्वास वहहर
idIndonesianMuharjo seorang xenofobia universal yang takut pada warga jazirah, contohnya Qatar
itItalianMa la volpe, col suo balzo, ha raggiunto il quieto Fido
jaJapaneseいろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす
koKorean키스의 고유조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다
ltLithuanianĮlinkdama fechtuotojo špaga sublykčiojusi pragręžė apvalų arbūzą
lvLatvianMuļķa hipiji mēģina brīvi nogaršot celofāna žņaudzējčūsku
nbNorwegianVår sære Zulu fra badeøya spilte jo whist og quickstep i min taxi
nlDutchExact vijf voor twaalf had de psycholoog zijn quotum bereikt
plPolishJeżu klątw, spłódź Finom część gry hańb!
ptPortugueseLuís argüia à Júlia que «brações, fé, chá, óxido, pôr, zângão» eram palavras do português
roRomanianMuzicologă în bej vând whisky și tequila, preț fix
ruRussianВ чащах юга жил бы цитрус? Да, но фальшивый экземпляръ! Помогающие агентства становятся более устойчивыми, разрабатывают планы готовности и реагируют на чрезвычайные ситуац
skSlovakKŕdeľ šťastných ďatľov učí pri ústí Váhu mĺkveho koňa obhrýzať kôru a žrať čerstvé mäso
svSwedishYxskaftbud, ge vår WC-zonmö IQ-hjälp
thThaiเป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่นฆ่าบีฑาใคร
trTurkishPijamalı hasta yağız şoföre çabucak güvendi
viVietnameseDo bạch kim rất quý, sẽ để lắp vô xương
zhChinese視野無限廣,窗外有藍天 (traditional) 中国智造,慧及全球 (simplified)

Fonts for non-western glyphs

LanguageFont usedExample characters
VietnameseSST VietnameseThiết lập
ArabicNeue Helvetica Arabic (Segoe UI on Windows)إعدادات
ThaiNeue Helvetica Thaiการตั้งค่า
HebrewHelvetica Hebrewהגדרות
HindiSaral Devanagariलाभो सुचना
KoreanSystem Default (Apple SD Gothic Neo)설정
JapaneseSystem Default (Heiti SC)設定
ChineseSystem Default (Heiti SC)设置

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.