Typography

Typeface

Currently PrimoCSS uses the system font from your OS and fall back to sans-serif. To apply or change what global font you require, it can be found in _settings.defaults.scss under the $global-font-family variable. This is globally used under the <html> element where the default font-size, font-weight, line-height and color for the whole framework are set.

Example
$global-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !default;

Weights

We have a full set of weights that can be used and changed. The base font-weight is set to 400 via the $global-font-weight variables. Here is a list of other variables that can be used heading elements and other inline copy elements.

Example
$font-weight-lt:              300 !default;
$font-weight-rg:              400 !default;
$font-weight-sb:              600 !default;
$font-weight-bd:              700 !default;
$font-weight-xb:              800 !default;

Headings

All HTML headings are styled between <h1> to <h6>, each element uses the font-heading mixin which sets the size, weight and responsive sizes if $global-responsive is set to true. Heading styles can be found in _elements.headings.scss.

Example

h1. Realigned equestrian fez bewilders picky monarch
$h1-font-size | 36px

h2. Realigned equestrian fez bewilders picky monarch
$h2-font-size | 30px

h3. Realigned equestrian fez bewilders picky monarch
$h3-font-size | 24px

h4. Realigned equestrian fez bewilders picky monarch
$h4-font-size | 20px

h5. Realigned equestrian fez bewilders picky monarch
$h5-font-size | 18px
h6. Realigned equestrian fez bewilders picky monarch
$h6-font-size | 16px
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Body copy

The global default font-size is 16px and set by $global-font-size. This is controlled by <html> and filters through all other elements and text. Paragraph elements have a set margin-top if next to each other and keeps a set vertical scale in PrimoCSS.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, possimus vero dolores consequatur nihil sapiente nesciunt sint odit, facere excepturi, quis enim porro. Perspiciatis, harum.

Numquam blanditiis deleniti molestiae esse cupiditate ducimus cumque qui mollitia consequatur optio minima, praesentium quaerat alias neque similique! Ex iusto doloribus a sit autem doloremque.

<p>...</p>

Inline copy elements

Text and copy and also be changed with other inline copy elements such as <strong>, <em>, <small> or <time>. All these tags can be used for different purposes and if used correctly will create a semantic document which not only improves readability but also accessibility. All tags listed are styled in _elements.page.scss.

Example

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The example

The u element example

The var element example

<abbr>...</abbr>
<b>...</b>
<cite>...</cite>
<code>...</code>
<data>...</data>
<del>...</del>
<dfn>...</dfn>
<dfn title="...">...</dfn></p>
<em>...</em>
<i>...</i>
<ins>...</ins>
<kbd>...</kbd>
<mark>...</mark>
<q>...</q>
<s>...</s>
<samp>...</samp>
<small>...</small>
<strong>...</strong>
<sub>...</sub>
<sup>...</sup>
<time datetime="...">...</time>
<u>...</u>
<var>...</var>

Blockquote and citations

The <blockquote> tag specifies a section that is quoted from another source. Use <q> for inline (short) quotations. Blockquote styles can be found in _elements.quotes.scss

Example

This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

<blockquote>
   <p>...</p>
   <footer>
       <cite>...</cite>
    </footer>
</blockquote>

Alignment classes

Align your text left, right, centre, justified or inherit from a parent with alignment utility classes.

Example

Left aligned text

Center aligned text

Right aligned text

<p class="u-align-left">...</p>
<p class="u-align-center">...</p>
<p class="u-align-right">...</p>

Related content