Typography

The font size on a website should be responsive to the screen size that displays it. Factors like type size, line height, and line length should also be considered.

Headings from H1 to H6, and the we can have P for paragraphs. If needed we can have multiple variations of paragraphs, but its suggested to never have more than 3 paragraph styles.

In this design system the font we will use is Open Sans

Headings


In this section we demonstrate how it supposed to look with the .bg {background-color: #FAFBFC;} the different kinds of text
Tag Font Size (rem) Example
<h1></h1> 1.33 h1. Heading
<h2></h2> 1.26

h2. Heading

<h3></h3> 1.20

h3. Heading

<h4></h4> 1.15

h4. Heading

<h5></h5> 1.09
h5. Heading
<h6></h6> 1.04
h6. Heading
.subheading 1.25 Sub-headline
<p></p> 1 Body Text

We provided as well, .h1 through .h6 classes in case is difficult to target the heading

HTML
CSS

Paragraphs


Factors like type size, line height, and line length are elements that we are considering in each paragraph. See below for an example

Headline

Sub-headline

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio voluptatem veritatis beatae esse fuga, repellendus corporis ullam sunt distinctio atque aspernatur nihil mollitia nemo molestias, laudantium quidem id repellat numquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo cumque maiores deserunt reprehenderit quod, delectus illo excepturi ut dolor? Facere necessitatibus blanditiis minus architecto! Facere ipsa sit dignissimos cumque optio.

HTML
CSS