LibRext — Typography

Back to Specimens

LibRext has a heavy focus on old-style serif fonts, as it looks to early Renaissance printed works as inspiration. The design system’s text styles are organized by "Font Roles" and "Document Roles”

Font Roles are functional roles that can be shared by multiple elements.

Document Roles correspond to common document styles and HTML/Markdown structure

Typefaces

LibRext text styles revolve around six typefaces:


Font Roles

Font definitions available for the design system. These are defined by general roles, and can be used by several (more specific) styles.

Document Roles

Font definitions for text within a document. These are defined by specific roles in a page or screen. Such as titles, subtitles, headings, etc.
The document roles defined in the system include:

The quick brown fox jumps over the lazy dog.

hero

weight: bold
typescale: h1
htmlTags:
htmlClass: lbrxt-hero
The quick brown fox jumps over the lazy dog.

headline

weight: bold
typescale: h1
htmlTags:
htmlClass: lbrxt-headline
The quick brown fox jumps over the lazy dog.

title

weight: bold
typescale: h1
htmlTags:
htmlClass: lbrxt-title
The quick brown fox jumps over the lazy dog.

subtitle

weight: body
typescale: h3
htmlTags:
htmlClass: lbrxt-subtitle

The quick brown fox jumps over the lazy dog.


heading1

weight: bold
typescale: h1
htmlTags: h1
htmlClass: lbrxt-h1

The quick brown fox jumps over the lazy dog.


heading2

weight: bold
typescale: h2
htmlTags: h2
htmlClass: lbrxt-h2

The quick brown fox jumps over the lazy dog.


heading3

weight: bold
typescale: h3
htmlTags: h3
htmlClass: lbrxt-h3

The quick brown fox jumps over the lazy dog.


heading4

weight: bold
typescale: h4
htmlTags: h4
htmlClass: lbrxt-h4
The quick brown fox jumps over the lazy dog.

heading5

weight: bold
typescale: h5
htmlTags: h5
htmlClass: lbrxt-h5
The quick brown fox jumps over the lazy dog.

heading6

weight: bold
typescale: h6
htmlTags: h6
htmlClass: lbrxt-h6

The quick brown fox jumps over the lazy dog.


The quick brown fox jumps over the lazy dog.

body

weight: body
typescale: body
htmlTags: p, span
htmlClass: lbrxt-body
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

strong

weight: bold
typescale: body
htmlTags: b, strong
htmlClass: lbrxt-strong
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

em

weight: body
typescale: body
htmlTags: i, em
htmlClass: lbrxt-em
The quick brown fox jumps over the lazy dog.

rubric

weight: body
typescale: body
htmlTags:
htmlClass: lbrxt-rubric
  • The quick brown fox jumps over the lazy dog.

  • li

    weight: body
    typescale: body
    htmlTags: li
    htmlClass: lbrxt-li

    link

    weight: body
    typescale: body
    htmlTags: a
    htmlClass: lbrxt-link
    The quick brown fox jumps over the lazy dog.

    small

    weight: body
    typescale: small
    htmlTags: small
    htmlClass: lbrxt-small
    The quick brown fox jumps over the lazy dog.

    tiny

    weight: body
    typescale: tiny
    htmlTags:
    htmlClass: lbrxt-tiny
    The quick brown fox jumps over the lazy dog.

    superscript

    weight: body
    typescale: tiny
    htmlTags: sup
    htmlClass: lbrxt-super
    The quick brown fox jumps over the lazy dog.

    subscript

    weight: body
    typescale: tiny
    htmlTags: sub
    htmlClass: lbrxt-sub
    The quick brown fox jumps over the lazy dog.

    imgcaption

    weight: body
    typescale: small
    htmlTags: figcaption
    htmlClass: lbrxt-imgcap
    The quick brown fox jumps over the lazy dog.

    codeinline

    weight: body
    typescale: body
    htmlTags: code
    htmlClass: lbrxt-codein
                The quick brown fox jumps over the lazy dog.
              

    codeblock

    weight: body
    typescale: body
    htmlTags: pre
    htmlClass: lbrxt-codeblk
    The quick brown fox jumps over the lazy dog.

    quote

    weight: body
    typescale: body
    htmlTags: q
    htmlClass: lbrxt-quote
    The quick brown fox jumps over the lazy dog.

    blockquote

    weight: body
    typescale: body
    htmlTags: blockquote
    htmlClass: lbrxt-bquote
    The quick brown fox jumps over the lazy dog.

    pullquote

    weight: body
    typescale: body
    htmlTags:
    htmlClass: lbrxt-pquote

    Examples

    A few examples to illustrate LibRext styling.

    Universal Declaration of Human Rights

    United Nations General Assembly resolution 217 A
    (Paris, 10 December 1948)

    Article 1

    All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.

    Article 2

    Everyone is entitled to all the rights and freedoms set forth in this Declaration, without distinction of any kind, such as race, colour, sex, language, religion, political or other opinion, national or social origin, property, birth or other status. Furthermore, no distinction shall be made on the basis of the political, jurisdictional or international status of the country or territory to which a person belongs, whether it be independent, trust, non-self-governing or under any other limitation of sovereignty.

    Article 3

    Everyone has the right to life, liberty and security of person.

    Article 4

    No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.

    Article 5

    No one shall be subjected to torture or to cruel, inhuman or degrading treatment or punishment.

    Article 6

    Everyone has the right to recognition everywhere as a person before the law.


    AENEIDOS

    PUBLI VERGILI MARONIS

    LIBER I

    ARMA virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram; multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    Musa, mihi causas memora, quo numine laeso, quidve dolens, regina deum tot volvere casus insignem pietate virum, tot adire labores impulerit. Tantaene animis caelestibus irae?

    Urbs antiqua fuit, Tyrii tenuere coloni, Karthago, Italiam contra Tiberinaque longe ostia, dives opum studiisque asperrima belli; quam Iuno fertur terris magis omnibus unam posthabita coluisse Samo; hic illius arma, hic currus fuit; hoc regnum dea gentibus esse, si qua fata sinant, iam tum tenditque fovetque. Progeniem sed enim Troiano a sanguine duci audierat, Tyrias olim quae verteret arces; hinc populum late regem belloque superbum venturum excidio Libyae: sic volvere Parcas. Id metuens, veterisque memor Saturnia belli, prima quod ad Troiam pro caris gesserat Argis--- necdum etiam causae irarum saevique dolores exciderant animo: manet alta mente repostum iudicium Paridis spretaeque iniuria formae, et genus invisum, et rapti Ganymedis honores. His accensa super, iactatos aequore toto Troas, reliquias Danaum atque immitis Achilli, arcebat longe Latio, multosque per annos errabant, acti fatis, maria omnia circum. Tantae molis erat Romanam condere gentem!


    Sancta Missa

    ex "divinumofficium.com"

    Introitus

    Ps 20:2-3
    In virtúte tua, Dómine, lætábitur iustus: et super salutáre tuum exsultábit veheménter: desidérium ánimæ eius tribuísti ei.

    Ps 20:4
    Quóniam prævenísti eum in benedictiónibus dulcédinis: posuísti in cápite eius corónam de lápide pretióso.
    ℣. Glória Patri, et Fílio, et Spirítui Sancto.
    ℟. Sicut erat in princípio, et nunc, et semper, et in sǽcula sæculórum. Amen.

    In virtúte tua, Dómine, lætábitur iustus: et super salutáre tuum exsultábit veheménter: desidérium ánimæ eius tribuísti ei.

    Gloria

    Oratio

    Orémus.
    Deus, qui beátum Nicoláum Pontíficem innúmeris decorásti miráculis: tríbue, quǽsumus; ut eius méritis et précibus a gehénnæ incéndiis liberémur.

    Per Dóminum nostrum Iesum Christum, Fílium tuum: qui tecum vivit et regnat in unitáte Spíritus Sancti Deus, per ómnia sǽcula sæculórum.
    ℟. Amen.