Source file

src/css/typography.css

View on GitHub

https://github.com/pmbrown/ming-css/blob/main/src/css/typography.css

Included with:

• ming.css
• ming.min.css
• ming.mono.css
• ming.mono.min.css
• ming.restart.css
• ming.restart.min.css

Headings (anchor)

Text (anchor)

Lists (anchor)

Inline elements (anchor)

Block elements (anchor)

<blockquote>

The quick brown fox jumps over the lazy dog.

— Editor Daily Blog

<pre>

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

<details>

<hr>

<figure>

Utilities (anchor)

Heading sizes (anchor)

Heading font-size property styles include a utility class for resizing text with the heading size values:

:where(h4), .h4 {
  font-size: var(--h4-fs, 1.375rem);
}

Example heading text

<p class="h4">Example heading text</p>

Visually hidden (anchor)

Content accessibility utilities that hide text visually but available for screen readers:

.vis-hidden, .vis-hidden-focus:not(:focus):not(:focus-within) {
  position: absolute;
  block-size: 1px;
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

The '.vis-hidden-focus' class is viewable when tabbed to for use with page skip to content links.

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds work with the default color values used with the block elements <pre> and <blockquote>.

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}