Typography Overview

Our typography system follows the “Evernote approach” with:

• Serif fonts (PT Serif/Noto Serif SC) for headlines and titles
• Sans-serif fonts (PT Sans/Noto Sans SC) for body text and UI elements

This approach creates an elegant visual hierarchy while ensuring excellent readability across our multilingual platform (English, Russian, and Chinese).

Font Families

Headings

We use serif fonts for all headings to create an elegant, distinctive appearance:

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Body Text

We use sans-serif fonts for body text to maximize readability:

<p>This is a paragraph of body text. Our typography system uses sans-serif fonts for body content to provide excellent readability across screen sizes. The base font size is 16px (1rem) with a line height of 1.5.</p>
<p>A second paragraph shows the spacing between paragraphs and demonstrates how text flows in a multi-paragraph context.</p>

Language-Specific Typography

Our typography system automatically adapts to the page language using the lang attribute on the HTML element.

English

English pages use PT Serif for headings and PT Sans for body text:

<div style="padding: 1rem; border: 1px solid var(--neutral-200); border-radius: 0.5rem;">
  <h3>English Typography Example</h3>
  <p>This text is using the English typography settings with PT Serif for headings and PT Sans for body text.</p>
</div>

Russian

Russian pages use the same PT Serif and PT Sans families, which have excellent Cyrillic support:

<div style="padding: 1rem; border: 1px solid var(--neutral-200); border-radius: 0.5rem;">
  <h3 class="ru">Пример Русской Типографики</h3>
  <p class="ru-sans">Этот текст использует настройки русской типографики с PT Serif для заголовков и PT Sans для основного текста.</p>
</div>

Chinese

Chinese pages use Noto Serif SC for headings and Noto Sans SC for body text:

<div style="padding: 1rem; border: 1px solid var(--neutral-200); border-radius: 0.5rem;">
  <h3 class="zh">中文排版示例</h3>
  <p class="zh-sans">此文本使用中文排版设置，标题使用思源宋体 (Noto Serif SC)，正文使用思源黑体 (Noto Sans SC)。</p>
</div>

Font Sizes

Our typography system uses a modular scale based on rems, maintaining proper hierarchical relationships between different text elements.

Font Weights

Available font weights for creating visual hierarchy:

Language Helper Classes

You can explicitly specify typography for a specific language using helper classes:

<p><span class="zh">中文文本</span> mixed with English text.</p>
<p><span class="ru">Русский текст</span> mixed with English text.</p>

Implementation Guidelines

Typography Variables

When implementing custom components, use the predefined typography variables to maintain consistency:

.my-component-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
}

.my-component-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}