Typography

All font-sizes are defined in rem, relative to the root element. Since we define the body to have a font-size of 62.5% we can assume that in most browsers this equates to 1.0rem = 10px.

Luma uses the default system font-stack by default. This ensures that your text looks good on any OS and device:

$sans-serif: (
  -apple-system,
  system-ui,
  BlinkMacSystemFont,
  'Segoe UI',
  Roboto,
  Oxygen,
  Ubuntu,
  Cantarell,
  'Open Sans',
  'Helvetica Neue',
  sans-serif
);

If you wish to use your own font, simply import it and add it on top of this stack.

Headings

All HTML headings, h1 through h6, have some default styling applied:

If you place an element with the class subtitle directly after a heading, it will be positioned closer to the heading, acting as a subtitle.

<h2>Some Heading</h2>
<h5 class="subtitle">With a subtitle</h5>

Inline Text Elements

Marked Text / Highlight

Use the mark element or class to highlight text with a marker pen effect.

<!-- Highlighted text: -->
Some <mark>highlighted</mark> text.
<!-- This also works: -->
Some <span class="mark">highlighted</span> text.

Links

By default, links will the displayed like this. If you wish, you can add the special link class to add an underline or even use the special highlight class to add a background-color effect: Example. You can easily customize the color with the $color-link-highlight variable.

<!-- Simple link: -->
Just a simple <a href="#">link</a>.
<!-- Underline: -->
A link with <a class="link">underline</a>.
<!-- Highlight effect: -->
Some <a class="highlight">fancy hightlight</a> effect.

Other Inline Elements

Feel free to use any of the other available inline elements:

<em>Emphasis</em>
<strong>Strong</strong>
<small>Small</small>

Helpers

There are a number of helper classes available that you can use:

<p class="text-right">Aligned right</p>
<p class="text-left">Aligned left</p>
<p class="text-center">Aligned center</p>
<p class="text-justify">Justified text</p>
<p class="text-lowercase">All letters are transformed to lowercase</p>
<p class="text-uppercase">All letters are transformed to uppercase</p>
<p class="text-capitalize">First letter of all words will be capitalized</p>
<p class="text-fade">Decreased size and opacity.</p>

Blockquote

For quoting blocks of content from another source within your document.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Custom Selection

Custom selection color is turned off by default, but you can turn it on in the /utilities/_Config.scss if you wish. As an example, try selecting this text with your mouse. You will see that it has a custom background color instead of the default blue.