Herman 2.0.0

Herman Typography

Initial styling for typographic elements in Herman. Some typography is also inherited from the Accoutrement-Init normalization files.

Related

Accoutrement-Init [external]

:root

scss
:root {
  @include font-family('sans');
  font-size: size('root');
  font-size: size('responsive'); //sass-lint:disable-line no-duplicate-properties
  line-height: ratio('herman');
}

The root typographic styles provide a default font, responsive font-size, fallback font-size, and line-height.

::selection

scss
::selection {
  background-color: color('callout');
}

Selected text uses a light color from the Herman color palette.

mark

scss
mark {
  background-color: color('callout');
  display: inline-block;
  padding: 0 size('quarter-shim');
}

For search-results, we mark target text with a background color.

[href]

scss
[href] {
  #{$link} {
    color: color('action');
    text-decoration-color: color('underline');
    text-decoration-skip: ink;
    transition: text-decoration-color 250ms, color 200ms;
  }

  #{$focus} {
    color: color('focus');
    text-decoration-color: currentColor;
  }
}

Default links use both color and text-underline to stand out from basic text.

Related

pre

scss
pre {
  @include font-family('code');
  font-size: size('code');
}

Pre-formatted blocks use our monospace code font-stack, and a smaller font-size.

code

scss
code {
  @include font-family('code');
  font-weight: bolder;

  pre & {
    display: block;
    font-weight: normal;
  }
}

Code uses a monospace font-stack, and slightly bolder text when inline - but allows for syntax-highlighting in a block context.

Related

.is-hidden

scss
.is-hidden {
  @include is-hidden;
}

Text that is provided for screen-reader accessibility only, can be visually hidden without removing from the DOM.

.text-block

scss
.text-block {
  max-width: 80ch;

  h1,
  h2,
  h3,
  h4 {
    color: color('black');

    a {
      #{$link} {
        text-decoration-color: transparent;
      }

      #{$focus} {
        text-decoration-color: currentColor;
      }
    }

    + h2,
    + h3 {
      margin-top: 0;
    }
  }

  h1 {
    font-size: size('h1');
    margin-bottom: size('shim');
  }

  h2,
  h3 {
    margin-top: size('gutter-plus');
  }

  > h2,
  > h3 {
    &:first-child {
      margin-top: 0;
    }
  }

  h2 {
    font-size: size('h2');
    margin-bottom: size('shim');
  }

  h3 {
    font-size: size('h3');
    font-weight: normal;
    margin-bottom: size('shim');
  }

  p,
  pre {
    margin-bottom: size('gutter-minus');
  }

  ol,
  ul {
    margin: 0 size('gutter') size('gutter-minus');
  }

  li {
    > p {
      margin: size('shim') 0;
    }
  }

  blockquote {
    border-left: size('half-shim') solid color('border-light');
    font-size: size('quote');
    margin-left: negative('gutter');
    padding-left: size('shim') + size('half-shim');

    > p {
      &:not(:last-child) {
        text-indent: -0.4em;

        @include wrap-content {
          color: color('theme-dark');
        }
      }
    }

    cite {
      display: block;
      font-size: size('reset');
      font-style: normal;
    }
  }
}

There are some typographic elements that can’t be applied globally, but will be generated in markdown-rendered html-text blocks. The text-block class can be used to provide max line-length and other typographic features – headings, blockquotes, lists, code, emphasis, etc.

Example

html
<div class="text-block">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <cite>—Anonymous</cite>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}</code></pre>
</div>

.invert-colors

scss
.invert-colors {
  @include invert-colors;
}

Invert the colors of a block, creating a light-on-dark area.

Example

html
<div class="invert-colors" style="padding: 1em;">
  You shall sojourn at <a href="#">Paris, Rome, and Naples</a>.
</div>

Requires