Skip to content

Easy Customization

Data attribute & CSS custom properties

data-typesettings

There are various values you can pass to the data-typesettings attribute. Mix and match for the desired design effects. 

<div data-typesettings="sans-serif indented golden vertical-rl dark">
  …
</div>
Modifier Description
sans-serif Sets the body text to sans-serif and heading text to serif.
indented Uses paragraph indents instead of paragraph spacing.
golden Turns on the golden ratio between article width and white space and sets the optimal character count per line.
vertical-rl Allows content to flow right to left vertically. See an example »
dark Applies a dark theme to the content.

Props

You can easily customize the styles by defining the available CSS custom properties (props) in the :root. Your own styles should come after typesettings.css. 

<link rel="stylesheet" href="[path]/typesettings.css">
<style>
  :root {
    …
  }
</style>

Color 

:root {
  --ts-color-body: [custom value];
  --ts-color-heading: [custom value];
  --ts-color-link: [custom value];
  --ts-color-background: [custom value];
  --ts-color-border: [custom value];
}

Example: --ts-color-link: #0000ff;

📣: Customize these colors in the context of light mode, because dark mode will invert all of them.

Font-Family 

:root {
  --ts-font-family-serif: [custom value];
  --ts-font-family-sans: [custom value];
  --ts-font-family-sans-alt: [custom value];
  --ts-font-family-monospace: [custom value];
}

Example: --ts-font-family-sans: 'Open Sans', sans-serif;

📣: Just want the same font for heading and body? Use --ts-font-family-only-one.

Font-Weight 

:root {
  --ts-font-weight-regular: [custom value];
  --ts-font-weight-bold: [custom value];
}

Example: --ts-font-weight-bold: 600;

Paragraph 

:root {
  --ts-paragraph-spacing: [custom value];
  --ts-paragraph-indent: [custom value];
}

Example: --ts-paragraph-indent: 2em;