File location: sass/typography/_typography.scss (GitHub)

Headlines

Heading elements h1 to h6 are styled out of the box.

You can achieve the same visual result by using the utility classes .h1, .h2 and so on, with any heading element. This lets you keep your markup semantic while at the same time reducing or increasing the font size relative to the element's default font size:

<h2 class="h4">An h2 headline, with a smaller font size</h2>

Read more: How correct heading use is relevant to accessibilty guidelines .

Text Columns

Split a text container into responsive columns with .two-columns, .three-columns or .four-columns on the parent element. The standard gutter between the columns is 4% of the viewport width, as determined by the @mixin col-format in the file sass/mixins/_mixins.scss.

Note: Text columns are automatically adapted to the viewport width by hgrid. All text column utilities are reset to the HTML default, single column flow on the $phone viewport. .three-columns and .four-columns are also reduced to two columns on $phone-landscape and $tablet-portrait viewports respectively.

  <div class="two-columns padding-40 border-gray-light radius-10 ">
  <p>Lorem ipsum dolor ...</p>
  <p>Curabitur sodales ...</p>
  <p>Class aptent taciti...</p>
</div>

Lists

Lists will get basic list styling if they are located within an article or a section element.

Text Formatting

<p>

If you're looking at the light mode version of this page, what you see is a hgrid text paragraph straight out of the box. On most viewports it has a font size of 1.88rem, a line height of 2.88rem and a bottom margin of 2rem. Use the $font-base, $font-size and $paragraph-margin-bottom variables to adjust the parameters.

<a>

Hyperlinks are automatically styled like this (refers to light mode). They can be customized in a couple of different ways.

<i>, <em> or .italic

Cursive text adds emphasis.

.normal

Resets italic font-style to font-style: normal.

<blockquote>

The only thing necessary for the triumph of evil is for good men to do nothing.

.uppercase

if you inspect the code you will discover that this text is lowercase

.lowercase

MOST OF THIS TEXT IS UPPERCASE, if you inspect the code.

.capitalize

"positive anything is better than negative nothing", coded in lowercase

.no-transform

text transform has been reset with class="no-transform"

.text-center

This is centered text with .text-center.

Additional alignment options: .text-left, .text-right, .text-justify, .text-unset, .text-start and .text-end

<u>, .underline (override with .no-underline)

Here comes a phrase with some underlined text.

<small>, .small

This is some smaller text in the middle of a line of regular text.

<sup> (supercript)

Superscript is useful for writing footnote references¹⁴. Ordinal numbers in some languages also make use of superscript. Paris XIV^e is how the French would usually write the "14^th arrondissement" (municipal district) of Paris.

<sub> (subscript)

Beer contains a lot of H₂O with CO₂.

<del>, <s> or .strike (override with .no-strike)

It's too late to change my mind

<code>

<pre><code>

exports.handler = async (event, context) => {
  if ((event.httpMethod !== 'OPTIONS') && (event.httpMethod !== 'POST')) {
    return {
      statusCode: 405,
      body: 'Method Not Allowed',
      headers: {
        Allow: 'POST'
      }
    }
  }
}

<mark>, .highlight

Add this to your markup in order to add extra emphasis to certain words or a phrase.

.shorten

Shorten long lines of text with this utility. Chocolate topping gummi bears. Dessert danish tart. Soufflé apple pie tootsie roll muffin carrot cake oat cake pudding sugar plum. Lollipop lollipop icing toffee halvah croissant gummies pastry. Jujubes chocolate cake tiramisu fruitcake. Cupcake marshmallow lollipop. Oat cake cupcake fruitcake. Croissant muffin gingerbread. Carrot cake soufflé danish sugar plum danish carrot cake. Dessert gummi bears cake caramels. Cupcake jelly beans liquorice danish. Icing icing croissant wafer cookie dessert. Brownie tiramisu bonbon pie tiramisu.

.ellipsis

Paragraphs of text can be shortened with an ellipsis symbol after a set number of lines. For the utility to work, the text element must have a fixed height, .overflow-hidden (a hgrid utility) and enough text to overflow, plus the following CSS: -webkit-line-clamp: 3 (number of lines displayed), display: -webkit-box and -webkit-box-orient: vertical. Works in all major browsers.

Font Weight

<strong>, <b> or .bold

Let's make the important words bold. Pongamos las palabras importantes en negrita.

Other font-weight utilities:

• .font-weight-100
• .font-weight-200
• .font-weight-300
• .font-weight-400
• .font-weight-500
• .font-weight-600
• .font-weight-700
• .font-weight-800
• .font-weight-900
• .font-normal

Letter Spacing (tracking)

Line Breaks

.word-break-all

Tells the browser to break words between any two characters instead of letting them overflow their container. This is the longest word in the English language: Pneumonoultramicroscopicsilicovolcanoconiosis (Wikipedia).

.word-break-normal

Tells the browser to use the default rule for line breaks and let long words overflow the container if needed. Here's a long word: Pneumonoultramicroscopicsilicovolcanoconiosis (Wikipedia).

Text Selection

.user-select-none

This text element and any potential sub-elements cannot be selected by the user.

.user-select-all

You can select this text element and any potential sub-elements with a single click.

.user-select-auto

This is the default for text selection in all browsers.

Text Colors

Adjust the text colors by customizing the color variables you find in /variables/_variables.scss, as described here. You can also override them with plain CSS, with or without their corresponding custom properties (see /variables/_custom-properties.scss).

Text Anti-Aliasing

⚠️ This feature has only been implemented for Chromium and Firefox on macOS systems. It will be ignored by other browsers/systems. The font-smooth property that previously made it into the CSS specification has since been removed.

Anti-aliasing is a term used to describe the programmatic process of making the edges of fonts (or any graphic) smoother. It's accomplished by adding additional pixels along the edge between a shape and its background. Anti-aliasing improves the appearance of jagged edges, so they look smooth on the screen.

.antialiased is hgrid's default setting, as seen in _base.scss. The result is smooth, crisp and slightly lighter than the subpixel rendering mode. In our opinion this works especially well for white text on dark backgrounds.

  .antialiased { 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.subpixel-antialiased is the default setting on macOS systems. It gives a stronger type.

  .subpixel-antialiased { 
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

← Previous: Input

Next: Animations →