Typography

Learn how to work with the default style of the Typography elements and its utility classes to build your content as you see fit

Overview

typography is the essence of the web application and with phenix, you have a standard typography styling by default with great helper utilities class names to transform and change your content you need first you need to keep in mind the default Reset style from the document before,

and you can start working with the typography elements you can start by customizing the font properties and responsive base line sizes for everything related like the example below,

in this document, we will cover an example of the default style of the typography elements alongside the utility class names to control these elements and keep in mind: the font-family is applied to the <body> and automatically inherited globally throughout Phenix DS.

:root {
    /*==== Font Families ====*/
    --primary-font   : 'Fira Sans', sans-serif;  /*===> Headlines */
    --secondary-font : 'Fira Sans', sans-serif;  /*===> Global Text */
    --icons-font: "Font Awesome 5";
    /*==== Font Weight ====*/
    --thin-weight   : 100;
    --xlight-weight : 200;
    --light-weight  : 300;
    --normal-weight : 400;
    --medium-weight : 500;
    --bold-weight   : 600;
    --strong-weight : 700;
    --xbold-weight  : 800;
    --black-weight  : 900;
    /*==== Standard Line-Height ====*/
    --line-height: 1.625;
}

/*==== Responsive REM Base ====*/
:root {
    --rem-xl : 16px; /*===> xLarge Screens and Up */
    --rem-lg : 16px; /*===> Large Screens and Up */
    --rem-md : 15px; /*===> Medium Screens and Up */
    --rem-sm : 15px; /*===> Small Screens and Up */
    --rem-xs : 15px; /*===> Extra Small Screens and Up */
}

Headings

All heading elements <h1>—<h6> and <p> are reset to have them margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.

Element Example Font Size
<h1>, .h1 Headline Level – 1 2rem
<h2>, .h2 Headline Level – 2 1.75rem
<h3>, .h3 Headline Level – 3 1.5625rem
<h4>, .h4 Headline Level – 4 1.4375rem
<h5>, .h5 Headline Level – 5 1.25rem
<h6>, .h6 Headline Level – 6 1.0625rem

Display headings

the display headlines are extra large Heading font-size that applies only for Desktop screens and beyond.

Class NameExampleFont Size.display-h1Display Title Level – 13.875rem (62px).display-h2Display Title Level – 23.25rem (52px).display-h3Display Title Level – 33rem (48px).display-h4Display Title Level – 42.75rem (44px).display-h5Display Title Level – 52.5rem (40px).display-h6Display Title Level – 62.25rem (36px)

Default Lists

All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom. We’ve also reset the padding-left on <ul> and <ol> elements.