Typography

The open source typeface Alegrya Sans, together with its serifed Alegrya sibling is used throughout all SeMI textual communications. Together they create a ‘humanist’ typeface superfamily. Combined with a consistent modular scale they provide an extensive palette to express any type of communication related to SeMI.

Alegrya provides an optimal reading rhythm, allowing for comfortable long-form reading without distraction. Excellent OpenType features (tabular lining of numbers, fractions, sub & superscript, small caps) and language support (Latin, Greek, Cyrillic, accented characters) mean that SeMI can take on any typographic challenge.

Typographic application

The minimal type size for body copy is set to 1,35em (translated to 21,6px in desktop browsers). Heading level sizes are in content-first fashion extrapolated from the body copy, providing rhythm and hierarchy in textual content.

Headings

Heading level one

HTML code snippet

<h1>Heading level one</h1>

Heading level two

HTML code snippet

<h2>Heading level two</h2>

Heading level three

HTML code snippet

<h3>Heading level three</h3>

Heading level four

HTML code snippet

<h4>Heading level four</h4>
Heading level five

HTML code snippet

<h5>Heading level five</h5>
Heading level five

HTML code snippet

<h6>Heading level six</h6>

Paragraph text and micro-typography

Paragraph text is set to a responsive measure adhering to a range of between 60 to 85 characters per line.

Between paragraphs a vertical space of 1em provides a consistent vertical rhythm.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum soluta esse quaerat ullam blanditiis illo veniam distinctio aut odit, ea corporis molestias accusamus. Quibusdam officia, molestias, accusamus suscipit eveniet dolores!

Ipsum similique quidem temporibus repudiandae ullam ut doloribus eligendi rerum modi! Est impedit rem fugiat, numquam voluptatibus iste maiores quas. Footnote 1 Nemo, eum!

Ex iusto eaque quis magni, earum, quas, ABBR recusandae at quasi, veritatis molestias H2O hic unde ducimus totam labore odio ipsum nostrum sequi excepturi. Recusandae, sequi asperiores. Quod magni, ducimus quidem! Recusandae aperiam ullam amet odio, eos, nisi dignissimos voluptas consectetur voluptatibus excepturi eum reiciendis a.

HTML code snippet

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Dolorum soluta esse quaerat</a> ullam blanditiis <em>illo veniam distinctio</em> aut odit, ea corporis molestias accusamus. Quibusdam officia, molestias, accusamus suscipit eveniet dolores!</p>
<p>Ipsum similique quidem temporibus repudiandae ullam ut doloribus eligendi rerum modi! <strong>Est impedit</strong> rem fugiat, numquam voluptatibus iste maiores quas. <sup>Footnote 1</sup> Nemo, eum!</p>
<p>Ex iusto eaque quis magni, earum, quas, <abbr title="This is an abbreviation">ABBR</abbr> recusandae at quasi, veritatis molestias H<sub>2</sub>O hic unde ducimus totam labore odio ipsum nostrum sequi excepturi. Recusandae, sequi asperiores. Quod magni, ducimus quidem! Recusandae aperiam ullam amet odio, eos, nisi dignissimos voluptas consectetur voluptatibus excepturi eum reiciendis a.</p>

Secondary text

This is primary text, this is secondary text.

HTML code snippet

<p>This is primary text, <span class="text--secondary">this is secondary text</span>.</p>

Section and column headings

Headings for a section or column are different from a headings in running body copy. The headings in running body copy are tailored to fit the rhythm based on the size of the paragraphs.

However, the section and column headings are different in a way that they're not directly associated with this running bodycopy. But usually accompanied by a payoff line or larger elements. Therefore the section and column headings have more visual emphasis. Also they are sans-serif.

For the section and column headings style has been decoupled from semantics. Meaning that you are able to apply the primary, secondary or tertiary style of a heading to a HTML heading of your choosing based on the semantic use and location on the page.

Title page

HTML code snippet

<h1 class="title-page">Title page</h1>

Title section

HTML code snippet

<h2 class="title-section">Title section</h2>

Title column

HTML code snippet

<h3 class="title-column">Title section</h3>