turretcss

Typography

A guide to the use of turretcss style definitions with typographic HTML elements including headings, paragraphs, blockquotes, etc.

Contents

Headings

Heading 1 Heading 1 small

Heading 2 Heading 2 small

Heading 3 Heading 3 small

Heading 4 Heading 4 small

Heading 5 Heading 5 small
Heading 6 Heading 6 small
--headings-margin: 2em 0 1em 0;
--headings-font-family: inherit;
--headings-font-weight: var(--font-weight-bold);
--headings-color: inherit;
--headings-line-height: var(--line-height-s);
--headings-text-transform: none;
--headings-letter-spacing: var(--letter-spacing);

--headings-small-font-family: inherit;
--headings-small-font-weight: inherit;
--headings-small-size: 0.6em;
--headings-small-color: inherit;

--h1-font-size: 2.25rem;
--h2-font-size: 2.0rem;
--h3-font-size: 1.5rem;
--h4-font-size: 1.25rem;
--h5-font-size: 1.125rem;
--h6-font-size: 1rem;
<h1>Heading 1 <small>Heading 1 small</small></h1>
<h2>Heading 2 <small>Heading 2 small</small></h2>
<h3>Heading 3 <small>Heading 3 small</small></h3>
<h4>Heading 4 <small>Heading 4 small</small></h4>
<h5>Heading 5 <small>Heading 5 small</small></h5>
<h6>Heading 6 <small>Heading 6 small</small></h6>

Display Title

Display Title

--display-title-margin: 0;
--display-title-font-family: var(--headings-font-family);
--display-title-font-weight: var(--headings-font-weight);
--display-title-font-size: 2.25rem;
--display-title-color: inherit;
--display-title-line-height: var(--line-height-xs);
--display-title-text-transform: uppercase;
--display-title-letter-spacing: var(--letter-spacing-m);
<h1 class="display-title">...</h1>

Big

The .big class is used for responsive text that scales between min/max sizes based on a varience between min/max widths and the viewport width.

Big

--big-margin: 0.5em 0;
--big-font-family: var(--headings-font-family);
--big-font-weight: var(--headings-font-weight);
--big-line-height: var(--line-height-xs);
--big-base-size: 36px;
--big-min-size: 36;
--big-max-size: 56;
--big-base-width: 320px;
--big-min-width: 320;
--big-max-width: 960;
<p class="big">...</p>

Small Caps

Small Caps

--small-caps-margin: 1em 0;
--small-caps-font-family: var(--headings-font-family);
--small-caps-font-weight: var(--headings-font-weight);
--small-caps-font-size: var(--font-size-s);
--small-caps-line-height: var(--line-height-xs);
--small-caps-text-transform: uppercase;
--small-caps-letter-spacing: var(--letter-spacing);
<h2 class="small-caps">...</h2>

Lead

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.

--lead-margin: 0.5em 0 1em 0;
--lead-font-family: inherit;
--lead-font-weight: inherit;
--lead-font-size: var(--font-size-xl);
--lead-color: inherit;
--lead-line-height: var(--line-height-m);
<p class="lead">...</p>

Paragraph

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

--paragraph-margin: 1em 0;
--paragraph-font-family: inherit;
--paragraph-font-weight: inherit;
--paragraph-font-size: var(--font-size-m);
--paragraph-color: inherit;
--paragraph-line-height: var(--line-height-m);
<p>...</p>
--link-color: currentColor;
--link-text-decoration: underline;
--link-hover-color: currentColor;
--link-hover-decoration: underline;

Link

<a href="">...</a>

Strong

strong

--strong-font-family: inherit;
--strong-font-weight: var(--font-weight-bold);
--strong-color: inherit;
<strong>...</strong>

Emphasis

emphasis

--emphasis-font-style: italic;
<em>...</em>

Horizontal Rule


--horizontal-rule-margin: var(--margin-s) auto;
--horizontal-rule-height: var(--border-width);
--horizontal-rule-background: var(--light);
<hr>

Blockquote

Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.

--blockquote-margin: 2em 0;
--blockquote-padding: 0 1em;
--blockquote-font-family: inherit;
--blockquote-font-weight: var(--lead-font-weight);
--blockquote-font-size: var(--lead-font-size);
--blockquote-font-style: normal;
--blockquote-line-height: var(--lead-line-height);
--blockquote-color: var(--lead-color);
<blockquote>
  <p>...</p>
  <cite>...</cite>
</blockquote>

Cite

Name

--cite-margin: 1em 0;
--cite-font-family: inherit;
--cite-font-weight: inherit;
--cite-font-size: var(--font-size-s);
--cite-font-style: normal;
--cite-color: inherit;
--cite-text-align: left;
<cite>...</cite>

List

--list-margin: 1em 0;
--list-padding: 0;
--list-font-family: var(--paragraph-font-family);
--list-font-weight: var(--paragraph-font-weight);
--list-font-size: var(--paragraph-font-size);
--list-color: var(--paragraph-color);
--list-line-height: var(--paragraph-line-height);

--list-item-margin: 0.5em 0 0.5em 1.5em;
--list-item-padding: 0 0 0 0.5em;

--child-list-margin:  0.5em 0 0.5em 0;
--child-list-padding: 0;
--child-list-item-margin: var(--list-item-margin);
--child-list-item-padding: var(--list-item-padding);

Unordered List

  • Vehicula Dapibus Tellus Fermentum
  • Vehicula Dapibus Tellus Fermentum
  • Vehicula Dapibus Tellus Fermentum
    • Vehicula Dapibus Tellus Fermentum
    • Vehicula Dapibus Tellus Fermentum
--unordered-list-icon: disc;
--unordered-child-list-icon: disc;
<ul>
  <li>...</li>
  <li>
    <ul>
      <li>...</li>
    </ul>
  </li>
</ul>

Ordered List

  1. Vehicula Dapibus Tellus Fermentum
  2. Vehicula Dapibus Tellus Fermentum
  3. Vehicula Dapibus Tellus Fermentum
    1. Vehicula Dapibus Tellus Fermentum
    2. Vehicula Dapibus Tellus Fermentum
<ol>
  <li>...</li>
  <li>
    <ol>
      <li>...</li>
    </ol>
  </li>
</ol>

Definition List

Fringilla Ipsum Tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fringilla Ipsum Tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fringilla Ipsum Tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
--definition-list-margin: var(--paragraph-margin);
--definition-list-padding: 0;
--definition-list-font-size: var(--paragraph-font-size);

--definition-term-margin: 0.5em 0;
--definition-term-font-family: var(--strong-font-family);
--definition-term-font-weight: var(--strong-font-weight);
--definition-term-font-size: inherit;
--definition-term-color: var(--paragraph-color);

--definition-description-margin: 0 0 1em 0;
--definition-description-font-family: var(--paragraph-font-family);
--definition-description-font-weight: var(--paragraph-font-weight);
--definition-description-font-size: inherit;
--definition-description-color: var(--paragraph-color);
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Code

<p>code</p>

--code-font-family: var(--font-family-monospace);
--code-font-weight: normal;
--code-font-size: 80%;
--code-color: var(--secondary);
<code>...</code>

Pre

<p>pre</p>
--pre-margin: 1em 0;
--pre-padding: 1em;
--pre-font-family: var(--code-font-family);
--pre-font-weight: normal;
--pre-font-size: var(--code-font-size);
--pre-color: inherit;
--pre-tab-size: 4;
--pre-hyphens: none;
--pre-line-height: var(--line-height-m);
--pre-background: var(--light-100);
--pre-border-width: var(--border-width);
--pre-border-style: var(--border-style);
--pre-border-color: var(--border-color);
--pre-border-radius: var(--border-radius);

--pre-code-color: var(--code-color);
<pre><code>...</code></pre>

Kbd

Save file: cmd + S

--kbd-margin: 0 0.2em;
--kbd-padding: 0.2em 0.4em;
--kbd-font-family: var(--code-font-family);
--kbd-font-weight: var(--code-font-weight);
--kbd-font-size: var(--code-font-size);
--kbd-color: var(--code-color);
--kbd-background: var(--pre-background);
--kbd-border-width: var(--pre-border-width);
--kbd-border-style: var(--pre-border-style);
--kbd-border-color: var(--pre-border-color);
--kbd-border-radius: var(--pre-border-radius);
<kbd>...</kbd>

Mark

mark

--mark-margin: 0;
--mark-padding: 0.2em 0.4em;
--mark-font-family: inherit;
--mark-font-weight: inherit;
--mark-font-size: inherit;
--mark-color: inherit;
--mark-background: yellow;
<mark>...</mark>
<mark class="error">...</mark>
<mark class="warning">...</mark>
<mark class="success">...</mark>
<mark class="info">...</mark>