Typography

The mildly opinionated typography styles provide the cornerstone values all other elements inherit and can be customized using root level and/or element-specific CSS variables either globally or inline.

Font sizes (anchor)

Themalize uses a responsive font sizing method learned from the CSS behind Jeremy Keith's website, it works by applying clamp values on the HTML tag and using REM values for other font sizes. See customizing further below for the code. The optional text utilities include modifier classes for font sizing, weight and line heights that can be used for text styling.

<h1>

The quick brown fox jumps over the lazy dog.

<h2>

The quick brown fox jumps over the lazy dog.

<h3>

The quick brown fox jumps over the lazy dog.

<h4>

The quick brown fox jumps over the lazy dog.

<h5>
The quick brown fox jumps over the lazy dog.
<h6>
The quick brown fox jumps over the lazy dog.

<p>

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789

<small>

The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789

Lists (anchor)

List item indentation has been adjusted for basic lists and can also be customized inline using a CSS variable included, see customizing below to view the styles. Optional list utilities are also available for further customizing lists.

<ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
<ul>
  • First item
  • Second item
  • Third item
  • Fourth item
<dl>
First term
First definition
Second term
Second definition

Inline and block elements (anchor)

Standard inline and block elements use user-agent styles for the most part with some basic opinionated adjustments. The optional images utilities provide modifiers for controlling image aspect-ratios that can be used with the <figure> element, and the accordions component includes stylised <details> disclosure elements.

Horizontal rule


Blockquote with author and citation.

— Editor Daily Blog
Details summary

Details body content

Figure image with caption.

Forest covered in snow with sunset filtering between tall trees.
Winter forest

Customizing (anchor)

Property values (anchor)

The default typography property values are defined from Sass variables that can be customized in the properties.scss document (or via overrides) when compiling as described on the setup and configuration page.

Properties

To decrease or increase font sizes globally adjust the 40% and 140% values up or down, and/or change individual REM font size values as required. Please note changing font families may require adjusting all values to suit.

$font-family:         system-ui, -apple-system, Arial, Helvetica, sans-serif !default;
$font-size:           clamp(100%, 40% + 0.666vw, 140%) !default;
$body:                1rem !default;
$fs-xl:               1.25rem !default;
$fs-lg:               1.1rem !default;
$fs-sm:               0.906rem !default;
$fs-xs:               0.813rem !default;
$fs-xxs:              0.75rem !default;
$h1:                  2rem !default;
$h2:                  1.725rem !default;
$h3:                  1.5rem !default;
$h4:                  1.35rem !default;
$h5:                  1.2rem !default;
$h6:                  1.063rem !default;
$lh-body:             1.5 !default;
$lh-header:           1.2 !default;

The property values are compiled as CSS variables which are then used to apply the styles, these can also be edited directly in the style sheet if required and/or used to customize styles inline.

CSS variables
:where(html) {
  --color: var(--text);
  --font: system-ui, -apple-system, Arial, Helvetica, sans-serif;
  --fs: clamp(100%, 40% + 0.666vw, 140%);
  --body: 1rem;
  --fs-xl: 1.25rem;
  --fs-lg: 1.1rem;
  --fs-sm: 0.906rem;
  --fs-xs: 0.813rem;
  --fs-xxs: 0.75rem;
  --h1: 2rem;
  --h2: 1.725rem;
  --h3: 1.5rem;
  --h4: 1.35rem;
  --h5: 1.2rem;
  --h6: 1.063rem;
  --lh-body: 1.5;
  --lh-header: 1.2;
}

New values can be added to the Sass properties above if required but for compiling must also be included with the typography Sass map in the _maps.scss document.

Typography map
$typography: (
  "color": var(--text),
  "font": #{$font-family},
  "fs": #{$font-size},
  "body": #{$body},
  "fs-xl": #{$fs-xl},
  "fs-lg": #{$fs-lg},
  "fs-sm": #{$fs-sm},
  "fs-xs": #{$fs-xs},
  "fs-xxs": #{$fs-xxs},
  "h1": #{$h1},
  "h2": #{$h2},
  "h3": #{$h3},
  "h4": #{$h4},
  "h5": #{$h5},
  "h6": #{$h6},
  "lh-body": #{$lh-body},
  "lh-header": #{$lh-header},
) !default;

Styles (anchor)

The typography styles can be customized in the _styles.scss document, they're written as standard CSS using :where() for 0 specificity with Sass use limited to defining optional icon properties for link styles.

Typography styles
* { 
  margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

:where(html, body, h1, h2, h3, h4, h5, h6) {
  color: var(--color);
  font-size: var(--fs);
  font-weight: var(--fw);
  line-height: var(--lh);
}

:where(html) {
  font-family: var(--font);
  background-color: var(--body-bg);
  height: 100%;
}

:where(body) {
  --fs: var(--body);
  --fw: normal;
  --lh: var(--lh-body);
}

:where(a) {
  --color: var(--link);
  --hover: var(--link-hover);
  --visited: var(--link-visited);
  @if $enable-icon-mixins or $enable-icon-styles {
  --ico: var(--color);
  }
  color: var(--color);
  overflow-wrap: break-word;
  text-decoration-color: color-mix(in srgb, var(--color) 75%, var(--body-bg));
  text-decoration-thickness: 1px;
  text-underline-offset: .1175em;
}

:where(a:visited) {
  color: var(--visited);
  text-decoration-color: color-mix(in srgb, var(--link) 35%, var(--body-bg)); 
}

:where(a:hover) {
  @if $enable-icon-mixins or $enable-icon-styles {
  --ico: var(--hover);
  }
  color: var(--hover);
  text-decoration: none;
}

:where(a:focus-visible) {
  outline: .094rem solid var(--link-hover);
  outline-offset: .1175rem;
  border-radius: .15em;
}

:where(h1, h2, h3, h4, h5, h6) a {
  text-decoration: none;
}

:where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, address) {
  text-wrap: var(--tw);
  margin-block-end: var(--mb);
}

:where(h1, h2, h3, h4, h5, h6) {
  --fw: 700;
  --lh: var(--lh-header);
  --tw: pretty;
  --mb: .75rem;
}

:where(h1) {
  --fs: var(--h1);
}

:where(h2) {
  --fs: var(--h2);
}

:where(h3) {
  --fs: var(--h3);
}

:where(h4) {
  --fs: var(--h4);
}

:where(h5) {
  --fs: var(--h5);
}

:where(h6) {
  --fs: var(--h6);
  --lh: 1.25;
}

:where(small) {
  --fs: var(--fs-sm);
  font-size: var(--fs);
}

:where(bold, strong) {
  --fw: bold;
  font-weight: var(--fw);
}

:where(p, ol, ul, dl, address) {
  --tw: pretty;
  --mb: 1rem;
  line-height: var(--lh);
}

:where(ol, ul) {
  --pl: 1.75rem;
  padding-inline-start: var(--pl);
}

:where(ol ol, ul ul, ol ul, ul ol, dl dl) {
  --mb: 0;
}

:where(dl) {
  --fw: bold;
  --dd-ml: 1rem;
}

:where(dt) {
  font-weight: var(--fw);
}

:where(dd) {
  margin-inline-start: var(--dd-ml);
}

:where(abbr[title]) {
  border: none;
  cursor: help;
}

:where(sup, sub) {
  font-size: var(--fs-xxs);
}

:where(mark) {
  color: marktext;
}

:where(code) {
  color: color-mix(in srgb, var(--text) 60%, var(--body-bg));
  word-wrap: break-word;
}

a > :where(code) {
  color: inherit;
}

:where(pre, code, kbd, samp) {
  font-family: Consolas, SFMono-Regular, monospace;
}

:where(kbd) {
  padding-block: .1em;
  padding-inline: .35em;
  background-color: var(--surf-2);
  border-radius: .25rem;
}

:where(pre) {
  overflow: auto;
  border: 1px solid var(--surf-2);
  padding: 1rem;
  margin-block-end: 1rem;
}

:where(pre code) {
  color: revert;
  word-break: normal;
}

:where(address) {
  font-style: normal;
}

:where(blockquote) {
  border: 1px solid var(--surf-1);
  border-inline-start-width: 10px;
  padding-block: .75rem;
  padding-inline: 1rem;
  margin-block-end: 1rem;
}

:where(blockquote p) {
  --mb: 0;
}

:where(blockquote p:first-of-type) {
  --fs: var(--fs-lg);
  --mb: .25rem;
  font-size: var(--fs);
}

:where(details) {
  margin-block-end: 1rem;
}

:where(summary) {
  font-weight: bold;
  cursor: pointer;
}

:where(details[open] summary) {
  margin-block-end: .5rem;
}

:where(hr) {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: none;
  border-block-start: 1px solid var(--surf-2);
  margin-block-end: 1rem;
}

:where(figure) {
  margin: 0;
  margin-block-end: 1rem;
}

:where(figcaption) {
  font-size: var(--fs-xs);
  padding-block-start: .5rem;
}

:where(img, svg, video, audio, iframe, embed, object) {
  display: block;
}

:where(img, svg) { 
  max-width: 100%;
}

:where(iframe) {
  border: 0;
}

@media (prefers-reduced-motion: no-preference) { 
  :where(html) { scroll-behavior: smooth; }
}

.vis-hidden {
  position: absolute;
  width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

.hidden {
  display: none;
}

To keep element-specific styles together in a single file for customizing the _styles.scss document also includes the CSS for the buttons and forms and tables styles.