Typography

Consistent reset styles for default HTML typography, lists, inline and block elements.

Examples (anchor)

The typography includes mildly opinionated styles for standard HTML content designed to provide a basic reset/normalize document for any web project. The styles are all written with:where() for 0 specificity, the default values can be customized when compiling and each element uses variables to allow customizing values inline after compiling.

Headings and text (anchor)

<h1>

Heading 1

<h2>

Heading 2

<h3>

Heading 3

<h4>

Heading 4

<h5>

Heading 5

<h6>

Heading 6
<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)

<ol>

  1. Item
  2. Item
  3. Item
  4. Item

<ul>

  • Item 1
  • Item 2
  • Item 3
  • Item 4

<dl>

Term 1
Description
Term 2
Description

Inline elements (anchor)

Bold/strong
Italic/emphasis
Superscript(1)
Subscript(2)
Delete

Mark
Small
Keyboard
Code
Abbr

Block elements (anchor)

<details>

Summary

Details body content

<blockquote>

Blockquote with author and citation.

— Editor Daily Blog

<hr>

<pre>

:where(html) {
  color-scheme: light dark;
  color: CanvasText;
  background-color: Canvas;
}

<figure> with caption

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

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss 
@use "stylemods/scss" as *;
@include typography-css;

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Enable using custom overrides or in the configuration.scss document:

overrides.scss 
@use 'stylemods/scss/configuration' with (
  $enable-typography: true,
);
configuration.scss 
$enable-typography: true !default;

Using overrides in a custom setup is recommended. See using the framework for more information including how the styles can also be compiled within cascade layers if preferred or required.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

typography.scss 
// ---------------------------------------------------------- 
// Typography
// ----------------------------------------------------------
$text-color:                  var(--text, CanvasText) !default;
$background-color:            var(--background, Canvas) !default;
$font-family:                 'system-ui, -apple-system, sans-serif' !default;
$html-font-size:              var(--html-fs, clamp(100%, 40% + 0.666vw, 140%)) !default;
$body-font-size:              var(--body-fs, 1rem) !default;
$body-font-weight:            var(--body-fw, normal) !default;
$body-line-height:            var(--body-lh, 1.5) !default;

$link-color:                  var(--link, light-dark(#1c3db5, #9fbfdf)) !default;
$visited-color:               var(--visited, color-mix(in srgb, $link-color 65%, white)) !default;
$hover-color:                 var(--hover, color-mix(in srgb, $link-color 75%, white)) !default;
$link-decoration-color:       color-mix(in srgb, $link-color 75%, Canvas) !default;
$visited-decoration-color:    color-mix(in srgb, $visited-color 50%, Canvas);
$link-decoration-width:       1px !default;
$link-underline-offset:       var(--link-offset, 0.1175em) !default;
$link-focus-offset:           var(--focus-offset, 2px) !default;

$h1-font-size:                var(--h1-fs, 2.125rem) !default;
$h2-font-size:                var(--h2-fs, 1.75rem) !default;
$h3-font-size:                var(--h3-fs, 1.5rem) !default;
$h4-font-size:                var(--h4-fs, 1.375rem) !default;
$h5-font-size:                var(--h5-fs, 1.25rem) !default;
$h6-font-size:                var(--h6-fs, 1.063rem) !default;
$heading-font-weight:         var(--heading-fw, 700) !default;
$heading-line-height:         var(--heading-lh, 1.2) !default;
$heading-text-wrap:           var(--heading-tw, pretty) !default;
$heading-margin-bottom:       var(--heading-mb, 0.75rem) !default;

$para-font-size:              var(--para-fs, inherit) !default;
$para-text-wrap:              var(--para-tw, pretty) !default;
$para-margin-bottom:          var(--para-mb, 1rem) !default;
$list-text-wrap:              var(--list-tw, pretty) !default;
$list-margin-bottom:          var(--list-mb, 1rem) !default;
$list-indent:                 var(--li-ps, 2rem) !default;
$dl-list-indent:              var(--dd-ms, 1rem) !default;

$small-font-size:             var(--sm-fs, 0.906em) !default;
$small-font-size-heading:     var(--sm-fs-heading, 0.75em) !default;
$strong-font-weight:          bold !default;
$code-color:                  var(--code, color-mix(in srgb, CanvasText 60%, Canvas)) !default;
$kbd-padding-block:           0.1em !default;
$kbd-padding-inline:          0.3em !default;
$kbd-radius:                  0.125em !default;
$kbd-background-color:        var(--kbd-bg, color-mix(in srgb, CanvasText 8%, Canvas)) !default;

$pre-padding:                 1rem !default;
$pre-margin-bottom:           1rem !default;
$pre-border-color:            var(--pre-bd-color, color-mix(in srgb, CanvasText 15%, Canvas)) !default;
$pre-background-color:        var(--pre-bg, color-mix(in srgb, CanvasText 4%, Canvas)) !default;
$address-margin-bottom:       1rem !default;
$blockquote-padding-block:    0.75rem !default;
$blockquote-padding-inline:   1rem !default;
$blockquote-margin-bottom:    1rem !default;
$blockquote-border-color:     var(--blockquote-bd-color, color-mix(in srgb, CanvasText 15%, Canvas)) !default;
$blockquote-border:           1px !default;
$blockquote-border-left:      10px !default;
$details-margin-bottom:       1rem !default;
$summary-open-margin-bottom:  0.75rem !default;
$summary-focus-shadow:        var(--summary-shadow, 0 0 0 0.12rem) !default;
$summary-focus-color:         var(--summary-color, color-mix(in srgb, CanvasText 22%, var(--background))) !default;
$figure-margin-bottom:        1rem !default;
$figcaption-padding-top:      0.25em !default;
$hr-color:                    color-mix(in srgb, CanvasText 22%, Canvas) !default;
$hr-margin-bottom:            1rem !default;

@mixin typography-css {

:where(:not([popover], dialog)) {
  margin: 0;
}

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

:where(html) {
  color-scheme: light dark;
  color: $text-color;
  font-size: $html-font-size;
  font-family: #{$font-family};  
  background-color: $background-color;
  block-size: 100%;
}

:where(body) {
  font-size: $body-font-size;
  font-weight: $body-font-weight;
  line-height: $body-line-height;
}

:where(a) {
  color: $link-color;
  overflow-wrap: break-word;
  text-decoration-color: $link-decoration-color;
  text-decoration-thickness: $link-decoration-width;
  text-underline-offset: $link-underline-offset;
}

:where(a:visited) {
  color: $visited-color;
  text-decoration-color: $visited-decoration-color;
}

:where(a:focus-visible) {
  outline: 1px solid $link-color;
  outline-offset: $link-focus-offset;
  border-radius: 0.125em;
}

:where(a:hover) {
  color: $hover-color;
  text-decoration: none;
}

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

:where(h1, h2, h3, h4, h5, h6) {
  font-weight: $heading-font-weight;
  line-height: $heading-line-height;
  text-wrap: $heading-text-wrap;
  margin-block-end: $heading-margin-bottom;
}

:where(h1) {
  font-size: $h1-font-size;
}

:where(h2) {
  font-size: $h2-font-size;
}

:where(h3) {
  font-size: $h3-font-size;
}

:where(h4) {
  font-size: $h4-font-size;
}

:where(h5) {
  font-size: $h5-font-size;
}

:where(h6) {
  --heading-lh: 1.25;
  font-size: $h6-font-size;
}

:where(p) {
  font-size: $para-font-size;
  text-wrap: $para-text-wrap;
  margin-block-end: $para-margin-bottom;
}

:where(ol, ul, dl) {
  text-wrap: $list-text-wrap;
  margin-block-end: $list-margin-bottom;
}

:where(ol, ul) {
  padding-inline-start: $list-indent;
}

:where(ol) {
  list-style-type: var(--marker, decimal);
}

:where(ul) {
  list-style-type: var(--marker, disc);
}

:where(ol ol, ul ul, ol ul, ul ol, dl dl) {
  margin-block-end: var(--list-child-mb, 0);
}

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

:where(dt):not(:first-child) {
  margin-block-start: var(--dt-mt);
}

:where(dd) {
  margin-inline-start: $dl-list-indent;
}

:where(small) {
  font-size: $small-font-size;
}

:where(h1, h2, h3, h4, h5, h6) small {
  font-size: $small-font-size-heading;
}

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

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

:where(code) {
  color: $code-color;
  word-wrap: break-word;
}

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

:where(kbd) {
  padding-block: $kbd-padding-block;
  padding-inline: $kbd-padding-inline;
  background-color: $kbd-background-color;
  border-radius: $kbd-radius;
}

:where(pre) {
  overflow: auto;
  padding: $pre-padding;
  margin-block-end: $pre-margin-bottom;
  border: 1px solid $pre-border-color;
  background-color: $pre-background-color;
}

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

:where(address) {
  font-style: normal;
  margin-block-end: $address-margin-bottom;
}

:where(blockquote) {
  padding-block: $blockquote-padding-block;
  padding-inline: $blockquote-padding-inline;
  margin-block-end: $blockquote-margin-bottom;
  border: $blockquote-border solid $blockquote-border-color;
  border-inline-start-width: $blockquote-border-left;
}

:where(blockquote p) {
  margin-block-end: 0.25rem;
}

:where(blockquote :last-child) {
  margin-block-end: 0;
}

:where(details) {
  margin-block-end: $details-margin-bottom;
}

:where(summary:focus-visible) {
  outline: none;
  border-radius: 0.125em;
  box-shadow: $summary-focus-shadow $summary-focus-color;
}

:where(summary) {
  cursor: pointer;
}

:where(details[open] summary) {
  margin-block-end: $summary-open-margin-bottom;
}

:where(hr) {
  border: none;
  border-block-start: 1px solid $hr-color;
  margin-block-end: $hr-margin-bottom;
}

:where(figure) {
  inline-size: fit-content;
  margin-block-end: $figure-margin-bottom;
}

:where(figcaption) {
  contain: inline-size;
  padding-block-start: $figcaption-padding-top;
}

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

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

:where(iframe) {
  border: 0;
}

} // End typography mixin