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