Typography

The DocBits typography system is built on a carefully selected set of fonts and sizes designed for readability, accessibility, and visual hierarchy.

Font Families

Primary Font: Roboto

Primary typeface for all body text and components

Clean, modern sans-serif
Excellent readability at all sizes
Wide language support
Weights: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)

css

font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Heading Font: Kanit (Alternative: Roboto)

For headlines and section titles

Modern, distinctive sans-serif
Available in multiple weights
Alternative: Roboto (for consistency)

css

font-family: 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Monospace: JetBrains Mono

For code blocks, inline code, and technical content

Purpose-built programming font
Clear distinction between similar characters
Optimized for readability at small sizes

css

font-family: 'JetBrains Mono', 'Courier New', monospace;

Font Sizes

The typographic scale follows a consistent progression for visual hierarchy:

Size	Pixels	CSS Class	Usage
Extra Small	12px	`.text-xs`	Captions, metadata
Small	14px	`.text-sm`	Secondary text, labels
Base	16px	`.text-base`	Body text (default)
Large	18px	`.text-lg`	Section text
Extra Large	20px	`.text-xl`	Subheadings
2X Large	24px	`.text-2xl`	Section titles
3X Large	32px	`.text-3xl`	Page titles
4X Large	48px	`.text-4xl`	Main headings

Usage Examples

html

<!-- Extra Small: Captions -->
<span class="text-xs">Last updated: 2 days ago</span>

<!-- Small: Secondary text -->
<p class="text-sm">This is additional information</p>

<!-- Base: Body text (default) -->
<p>This is regular body text that forms the majority of content.</p>

<!-- Large: Section text -->
<p class="text-lg">This is larger body text for emphasis.</p>

<!-- XL: Subheadings -->
<h3 class="text-xl">Subheading</h3>

<!-- 2XL: Section titles -->
<h2 class="text-2xl">Section Title</h2>

<!-- 3XL: Page titles -->
<h1 class="text-3xl">Page Title</h1>

Font Weights

Consistent weight system for visual hierarchy:

Weight	Value	CSS Class	Usage
Light	300	`.font-light`	Subtle text, disabled states
Regular	400	`.font-normal`	Body text (default)
Medium	500	`.font-medium`	Labels, emphasis
Semibold	600	`.font-semibold`	Subheadings
Bold	700	`.font-bold`	Headings, strong emphasis

Weight Scale Visualization

Light (300)        The quick brown fox jumps over the lazy dog
Regular (400)      The quick brown fox jumps over the lazy dog
Medium (500)       The quick brown fox jumps over the lazy dog
Semibold (600)     The quick brown fox jumps over the lazy dog
Bold (700)         The quick brown fox jumps over the lazy dog

Text Styles

Utility classes for text styling:

Text Alignment

html

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified text</p>

Text Transform

html

<p class="text-uppercase">UPPERCASE</p>
<p class="text-lowercase">lowercase</p>
<p class="text-capitalize">Capitalize</p>

Text Truncation

html

<!-- Single line truncation -->
<p class="text-truncate">Long text that gets truncated with ellipsis...</p>

<!-- Multi-line truncation -->
<p class="text-truncate-lines-2">Text truncated to 2 lines...</p>

Text Color

html

<p class="text-primary">Primary text color</p>
<p class="text-secondary">Secondary text color</p>
<p class="text-disabled">Disabled text</p>
<p class="text-error">Error message</p>

Headings

Semantic heading styles with consistent hierarchy:

html

<h1>Main Heading (32px, Bold)</h1>
<h2>Section Heading (24px, Bold)</h2>
<h3>Subsection Heading (20px, Semibold)</h3>
<h4>Minor Heading (18px, Semibold)</h4>
<h5>Label (16px, Medium)</h5>
<h6>Metadata (14px, Medium)</h6>

Heading Example

html

<h1 class="text-3xl font-bold">Main Title</h1>
<p class="text-base text-disabled">Published 2 days ago</p>

<h2 class="text-2xl font-semibold mt-6">Section Title</h2>
<p class="text-base">Section content goes here...</p>

<h3 class="text-xl font-semibold mt-4">Subsection</h3>
<p class="text-base">Subsection content...</p>

Line Height

Consistent line height for readability:

Usage	Line Height	CSS Variable
Headings	1.2	`--line-height-tight`
Body Text	1.6	`--line-height-normal`
Dense Text	1.4	`--line-height-relaxed`

css

/* Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

/* Body text */
p, li {
  line-height: 1.6;
}

/* Dense text */
.text-dense {
  line-height: 1.4;
}

Letter Spacing

Adjustments for different text sizes:

css

/* Large headings - tighter spacing */
h1, .text-3xl {
  letter-spacing: -0.5px;
}

/* Normal text */
p, .text-base {
  letter-spacing: 0;
}

/* Small text - slightly wider for readability */
.text-sm {
  letter-spacing: 0.3px;
}

.text-xs {
  letter-spacing: 0.5px;
}

Component Typography

Labels

html

<label class="text-sm font-medium">Form Label</label>
<label class="text-xs font-medium text-disabled">Optional</label>

Buttons

html

<button class="text-base font-medium">Primary Button</button>
<button class="text-sm font-medium">Small Button</button>

Tables

html

<th class="text-sm font-medium">Column Header</th>
<td class="text-base">Table cell content</td>
<td class="text-sm text-disabled">Metadata</td>

List Items

html

<li class="text-base">List item</li>
<li class="text-sm text-disabled">Secondary list item</li>

Badges & Tags

html

<span class="text-xs font-medium">Badge</span>
<span class="text-xs font-semibold">Important Tag</span>

Typography in Vue Components

Composition API Example

vue

<template>
  <div class="article">
    <h1 class="text-3xl font-bold">Article Title</h1>
    <p class="text-sm text-disabled">Published 3 days ago</p>

    <h2 class="text-2xl font-semibold mt-6">Introduction</h2>
    <p class="text-base leading-relaxed">
      Introduction paragraph with proper line height for readability.
    </p>

    <h3 class="text-xl font-semibold mt-4">Key Point</h3>
    <p class="text-base">Content here...</p>

    <code class="text-xs font-mono">const example = "code";</code>
  </div>
</template>

<style scoped>
.article {
  font-family: 'Roboto', sans-serif;
}

.article h1,
.article h2,
.article h3 {
  font-family: 'Kanit', sans-serif;
}

.article code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--vp-code-block-bg);
  padding: 2px 6px;
  border-radius: 3px;
}
</style>

Accessibility

Color Contrast

Text colors meet WCAG 2.1 AA standards:

Body text on background: 5.1:1 contrast ratio (light mode)
Body text on background: 5.3:1 contrast ratio (dark mode)
Large text (18px+) minimum 3:1 contrast ratio

Line Height

Minimum line height for readability:

Body text: 1.5x font size (1.6 recommended)
Headings: 1.2x font size
Dense text: 1.4x font size

Font Weight

Use sufficient weight for distinction:

Regular weight (400) for body text
Medium or Bold (500+) for emphasized text
Avoid weights below 300 for accessibility

Best Practices

1. Maintain Hierarchy

Use consistent sizing and weight to create clear visual hierarchy:

html

<!-- ✅ Good: Clear hierarchy -->
<h1 class="text-3xl font-bold">Main Title</h1>
<h2 class="text-2xl font-semibold">Section</h2>
<p class="text-base">Body text</p>

<!-- ❌ Bad: Unclear hierarchy -->
<h1 class="text-lg">Main Title</h1>
<h2 class="text-xl">Section</h2>
<p class="text-base">Body text</p>

2. Readability First

Prioritize readability over style:

css

/* ✅ Good: Readable */
line-height: 1.6;
font-size: 16px;
max-width: 65 characters per line;

/* ❌ Bad: Hard to read */
line-height: 1.2;
font-size: 12px;
width: 100%;

3. Consistent Spacing

Use consistent spacing between text elements:

html

<!-- ✅ Good: Consistent spacing -->
<h2 class="text-2xl font-semibold mt-6 mb-3">Heading</h2>
<p class="text-base mb-4">Paragraph</p>

<!-- ❌ Bad: Inconsistent spacing -->
<h2 class="text-2xl font-semibold">Heading</h2>
<p class="text-base">Paragraph</p>

4. Limit Font Sizes

Use only a few sizes for consistency:

css

/* ✅ Good: Limited set */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;

/* ❌ Bad: Too many sizes */
--text-size-1: 11px;
--text-size-2: 13px;
--text-size-3: 15px;
/* ... */

Colors - Color palette and usage
Dark Mode - Dark theme typography
Components - Typography in components

Typography ​

Font Families ​

Primary Font: Roboto ​

Heading Font: Kanit (Alternative: Roboto) ​

Monospace: JetBrains Mono ​

Font Sizes ​

Usage Examples ​

Font Weights ​

Weight Scale Visualization ​

Text Styles ​

Text Alignment ​

Text Transform ​

Text Truncation ​

Text Color ​

Headings ​

Heading Example ​

Line Height ​

Letter Spacing ​

Component Typography ​

Labels ​

Buttons ​

Tables ​

List Items ​

Badges & Tags ​

Typography in Vue Components ​

Composition API Example ​

Accessibility ​

Color Contrast ​

Font Size ​

Line Height ​

Font Weight ​

Best Practices ​

1. Maintain Hierarchy ​

2. Readability First ​

3. Consistent Spacing ​

4. Limit Font Sizes ​

Related Resources ​

Typography

Font Families

Primary Font: Roboto

Heading Font: Kanit (Alternative: Roboto)

Monospace: JetBrains Mono

Font Sizes

Usage Examples

Font Weights

Weight Scale Visualization

Text Styles

Text Alignment

Text Transform

Text Truncation

Text Color

Headings

Heading Example

Line Height

Letter Spacing

Component Typography

Labels

Buttons

Tables

List Items

Badges & Tags

Typography in Vue Components

Composition API Example

Accessibility

Color Contrast

Font Size

Line Height

Font Weight

Best Practices

1. Maintain Hierarchy

2. Readability First

3. Consistent Spacing

4. Limit Font Sizes

Related Resources