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 six

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 H₂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.

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>