Skip to main content
Arda uses classical serif fonts to create a manuscript-style reading experience.

​
Font families

The theme uses traditional serif typefaces with fallbacks: 
--font-interface: "Palatino Linotype", "Book Antiqua", "Palatino", serif;
--font-text: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
--font-monospace: "Courier New", monospace;

​
Font stack

  • Interface font: Palatino Linotype → Book Antiqua → Palatino → serif
  • Body text: Palatino Linotype → Book Antiqua → Times New Roman → serif
  • Code font: Courier New monospace

​
Heading styles

​
Sizes

Headings use a carefully scaled size system: 
--h1-size: 2em;
--h2-size: 1.6em;
--h3-size: 1.3em;
--h4-size: 1.12em;
--h5-size: 1.02em;
--h6-size: 0.95em;

​
Weights

Headings decrease in weight as they decrease in size: 
--h1-weight: 700;  /* Bold */
--h2-weight: 600;  /* Semi-bold */
--h3-weight: 600;
--h4-weight: 600;
--h5-weight: 500;  /* Medium */
--h6-weight: 500;

​
Colors

Headings use burgundy and rose tones: 
--h1-color: #c08497;  /* Light rose */
--h2-color: #c08497;
--h3-color: #b07585;  /* Medium rose */
--h4-color: #a06575;
--h5-color: #906070;  /* Deep rose */
--h6-color: #806060;  /* Burgundy */

​
Inline titles

Note titles have enhanced styling: 
--inline-title-font: var(--h1-font);
--inline-title-weight: 700;
--inline-title-size: 2.4em;  /* Larger than H1 */
--inline-title-line-height: 1.2;
--inline-title-color: #c9a0a8;
Inline titles also feature a decorative underline: 
.inline-title::after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  margin: 10px auto 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--interactive-accent),
    transparent
  );
}

​
Line height and spacing

--h1-line-height: 1.3;
--h2-line-height: 1.35;
--heading-spacing: 1.6em;
--p-spacing: 0.85em;

​
Font features

The theme enables lining numerals for consistent number alignment: 
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
-webkit-font-feature-settings: "lnum" 1;

​
Base text size

--font-text-size: 17px;

Build docs developers (and LLMs) love

Get started for freeTalk to us