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.
body {
font-family: "Roboto";
}
Colors
Consistent use of a limited set of colors can enforce hierarchy within your application.
- --calcite-color-text-1#151515
- --calcite-color-text-2#4A4A4A
- --calcite-color-text-3#6A6A6A
Light mode
- --calcite-color-text-1#FFFFFF
- --calcite-color-text-2#BFBFBF
- --calcite-color-text-3#9F9F9F
Dark mode
Size & weight
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
Type | Color | Size | Weight | Line height | Space below |
---|---|---|---|---|---|
Heading | --calcite-color-text-1 | --calcite-font-size-6 | --calcite-font-weight-medium | 1.25 | 12px |
Subeading | --calcite-color-text-2 | --calcite-font-size-3 | --calcite-font-weight-medium | 1.25 | 12px |
Paragraph | --calcite-color-text-3 | --calcite-font-size-3 | --calcite-font-weight-normal | 1.25 | 24px |
Tertiary | --calcite-color-text-3 | --calcite-font-size-2 | --calcite-font-weight-normal | 1.375 |
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.
<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.
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.
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.
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 47 | Language | Example characters |
---|---|---|
ar | Arabic | صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت — يَحظى الضَجيعُ بِها نَجلاءَ مِعطا |
bs | Bosnian | Sva ljudska bića rađaju se slobodna i jednaka u dostojanstvu i pravima |
cs | Czech | Příliš žluťoučký kůň úpěl ďábelské ódy |
da | Danish | Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon |
de | German | Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich |
el | Greek | Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός Takhístè alôpèx vaphês psèménè gè, draskelízei ypér nòthroý kynós |
es | Spanish | Benjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú |
et | Estonian | Põdur Zagrebi tšellomängija-följetonist Ciqo külmetas kehvas garaažis |
fi | Finnish | Fahrenheit ja Celsius yrjösivät Åsan backgammon-peliin, Volkswagenissa, daiquirin ja ZX81:n yhteisvaikutuksesta |
fr | French | Voyez le brick géant que j’examine près du wharf |
ka | Georgian | ღმერთსი შემვედრე, ნუთუ კვლა დამხსნას სოფლისა შრომასა, ცეცხლს, წყალსა და მიწასა, ჰაერთა თანა მრომასა |
he | Hebrew | שפן אכל קצת גזר בטעם חסה, ודי לְדַפדֵף הפתרונות שלי עֶזרָה הֲגָנָה |
hi | Hindi | लाभो सुचना उद्योग परिवहन विनिमय बाटते काम अधिकार निर्माता विभाजनक्षमता सादगि हुआआदी विश्वास वहहर |
id | Indonesian | Muharjo seorang xenofobia universal yang takut pada warga jazirah, contohnya Qatar |
it | Italian | Ma la volpe, col suo balzo, ha raggiunto il quieto Fido |
ja | Japanese | いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす |
ko | Korean | 키스의 고유조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다 |
lt | Lithuanian | Įlinkdama fechtuotojo špaga sublykčiojusi pragręžė apvalų arbūzą |
lv | Latvian | Muļķa hipiji mēģina brīvi nogaršot celofāna žņaudzējčūsku |
nb | Norwegian | Vår sære Zulu fra badeøya spilte jo whist og quickstep i min taxi |
nl | Dutch | Exact vijf voor twaalf had de psycholoog zijn quotum bereikt |
pl | Polish | Jeżu klątw, spłódź Finom część gry hańb! |
pt | Portuguese | Luís argüia à Júlia que «brações, fé, chá, óxido, pôr, zângão» eram palavras do português |
ro | Romanian | Muzicologă în bej vând whisky și tequila, preț fix |
ru | Russian | В чащах юга жил бы цитрус? Да, но фальшивый экземпляръ! Помогающие агентства становятся более устойчивыми, разрабатывают планы готовности и реагируют на чрезвычайные ситуац |
sk | Slovak | Kŕdeľ šťastných ďatľov učí pri ústí Váhu mĺkveho koňa obhrýzať kôru a žrať čerstvé mäso |
sv | Swedish | Yxskaftbud, ge vår WC-zonmö IQ-hjälp |
th | Thai | เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่ นฆ่าบีฑาใคร |
tr | Turkish | Pijamalı hasta yağız şoföre çabucak güvendi |
vi | Vietnamese | Do bạch kim rất quý, sẽ để lắp vô xương |
zh | Chinese | 視野無限廣,窗外有藍天 (traditional) 中国智造,慧及全球 (simplified) |
Fonts for non-western glyphs
Language | Font used | Example characters |
---|---|---|
Vietnamese | SST Vietnamese | Thiết lập |
Arabic | Neue Helvetica Arabic (Segoe UI on Windows) | إعدادات |
Thai | Neue Helvetica Thai | การตั้งค่า |
Hebrew | Helvetica Hebrew | הגדרות |
Hindi | Saral Devanagari | लाभो सुचना |
Korean | System Default (Apple SD Gothic Neo) | 설정 |
Japanese | System Default (Heiti SC) | 設定 |
Chinese | System Default (Heiti SC) | 设置 |