Skip to main content
Arda provides extensive control over typography through CSS variables, allowing you to customize fonts, sizes, weights, and spacing throughout the theme.

​
Font Stacks

The theme uses three main font categories: 
body {
  --font-interface: "Palatino Linotype", "Book Antiqua", "Palatino", serif;
  --font-text: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --font-monospace: "Courier New", monospace;
}
  • --font-interface: Used for UI elements, buttons, tags, and navigation
  • --font-text: Used for body text and reading content
  • --font-monospace: Used for code blocks and inline code

​
Using Custom Fonts

Example: Modern sans-serif fonts 
body {
  --font-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-monospace: "SF Mono", Monaco, "Cascadia Code", monospace;
}
Example: Classic book style 
body {
  --font-interface: "Garamond", "Georgia", serif;
  --font-text: "Garamond", "Baskerville", "Georgia", serif;
  --font-monospace: "Consolas", "Monaco", monospace;
}
Example: Custom web fonts 
/* First, load your fonts */
@font-face {
  font-family: 'Inter';
  src: url('path/to/Inter.woff2') format('woff2');
  font-weight: 100 900;
}

@font-face {
  font-family: 'Fira Code';
  src: url('path/to/FiraCode.woff2') format('woff2');
}

body {
  --font-interface: "Inter", sans-serif;
  --font-text: "Inter", sans-serif;
  --font-monospace: "Fira Code", monospace;
}

​
Font Sizes

​
Base Text Size

body {
  --font-text-size: 17px;  /* Base font size for body text */
}

​
Heading Sizes

Each heading level has its own size, defined in relative units (em): 
body {
  --h1-size: 2em;      /* 2x base size */
  --h2-size: 1.6em;
  --h3-size: 1.3em;
  --h4-size: 1.12em;
  --h5-size: 1.02em;
  --h6-size: 0.95em;
}
Example: Larger headings 
body {
  --h1-size: 2.5em;
  --h2-size: 2em;
  --h3-size: 1.6em;
  --h4-size: 1.3em;
  --h5-size: 1.1em;
  --h6-size: 1em;
}

​
Inline Title

The inline title (page title at the top of notes) has separate size controls: 
body {
  --inline-title-size: 2.4em;
  --inline-title-line-height: 1.2;
}

​
Other Font Sizes

body {
  --code-size: 0.88em;          /* Inline code size */
  --footnote-size: 0.8em;       /* Footnote size */
  --popover-font-size: 0.92em;  /* Popover text size */
}

​
Font Weights

​
Heading Weights

Control the boldness of each heading level: 
body {
  --h1-weight: 700;   /* Bold */
  --h2-weight: 600;   /* Semi-bold */
  --h3-weight: 600;
  --h4-weight: 600;
  --h5-weight: 500;   /* Medium */
  --h6-weight: 500;
}
Example: Lighter headings 
body {
  --h1-weight: 600;
  --h2-weight: 500;
  --h3-weight: 500;
  --h4-weight: 400;
  --h5-weight: 400;
  --h6-weight: 400;
}

​
Inline Title Weight

body {
  --inline-title-weight: 700;
}

​
Other Weights

.theme-dark {
  --nav-item-weight-active: 700;        /* Active navigation items */
  --callout-title-weight: 600;          /* Callout titles */
  --table-header-weight: 600;           /* Table headers */
  --tag-weight: 500;                    /* Tags */
  --titlebar-text-weight: 600;          /* Title bar text */
  --vault-profile-font-weight: 600;     /* Vault profile */
  --metadata-label-font-weight: 500;    /* Property labels */
}

​
Font Variants

Control OpenType features and font variants: 
body {
  --h1-variant: normal;
  --h2-variant: normal;
  --inline-title-variant: normal;
  
  /* Enable lining numerals globally */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
Example: Small caps headings 
body {
  --h1-variant: small-caps;
  --h2-variant: small-caps;
}

​
Line Heights

​
Heading Line Heights

body {
  --h1-line-height: 1.3;
  --h2-line-height: 1.35;
  --inline-title-line-height: 1.2;
}
Example: More breathing room 
body {
  --h1-line-height: 1.5;
  --h2-line-height: 1.5;
}

​
Spacing

​
Heading and Paragraph Spacing

body {
  --heading-spacing: 1.6em;  /* Margin before headings */
  --p-spacing: 0.85em;       /* Margin between paragraphs */
}
Example: Tighter spacing 
body {
  --heading-spacing: 1.2em;
  --p-spacing: 0.6em;
}
Example: Looser spacing 
body {
  --heading-spacing: 2em;
  --p-spacing: 1.2em;
}

​
List Spacing

body {
  --list-spacing: 0.25em;  /* Spacing between list items */
  --list-indent: 2em;      /* Indentation for nested lists */
}

​
Heading Fonts

You can assign different fonts to each heading level: 
body {
  --h1-font: var(--font-interface);
  --h2-font: var(--h1-font);
  --h3-font: var(--h1-font);
  --h4-font: var(--h1-font);
  --h5-font: var(--h1-font);
  --h6-font: var(--h1-font);
}
Example: Display font for H1 
body {
  --h1-font: "Playfair Display", Georgia, serif;
  --h2-font: var(--font-interface);
  --h3-font: var(--font-interface);
}

​
Complete Typography Example

Here’s a complete example for a modern, clean reading experience: 
/* Modern sans-serif setup */
body {
  /* Fonts */
  --font-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-monospace: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  
  /* Base size */
  --font-text-size: 16px;
  
  /* Heading sizes */
  --h1-size: 2.2em;
  --h2-size: 1.8em;
  --h3-size: 1.5em;
  --h4-size: 1.25em;
  --h5-size: 1.1em;
  --h6-size: 1em;
  
  /* Weights */
  --h1-weight: 700;
  --h2-weight: 600;
  --h3-weight: 600;
  --h4-weight: 500;
  --h5-weight: 500;
  --h6-weight: 500;
  
  /* Line heights */
  --h1-line-height: 1.2;
  --h2-line-height: 1.3;
  
  /* Spacing */
  --heading-spacing: 1.8em;
  --p-spacing: 1em;
  --list-spacing: 0.4em;
}

​
Readable Book Style Example

/* Classic book typography */
body {
  /* Serif fonts for reading */
  --font-interface: "Georgia", "Palatino", serif;
  --font-text: "Georgia", "Palatino", "Times New Roman", serif;
  --font-monospace: "Courier New", monospace;
  
  /* Comfortable reading size */
  --font-text-size: 18px;
  
  /* Traditional heading hierarchy */
  --h1-size: 2em;
  --h2-size: 1.5em;
  --h3-size: 1.25em;
  --h4-size: 1.1em;
  --h5-size: 1em;
  --h6-size: 0.9em;
  
  /* Moderate weights */
  --h1-weight: 600;
  --h2-weight: 600;
  --h3-weight: 500;
  --h4-weight: 500;
  --h5-weight: 400;
  --h6-weight: 400;
  
  /* Generous line height for readability */
  --h1-line-height: 1.4;
  --h2-line-height: 1.4;
  
  /* Spacious layout */
  --heading-spacing: 2em;
  --p-spacing: 1.2em;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us