Text
File: ./scss/base/typography
Inline text elements
Styling for common inline HTML5 elements.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
This line is rendered as muted text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p>
<ins
>This line of text is meant to be treated as an addition to the
document.</ins
>
</p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p class="text-muted">This line is rendered as muted text.</p>
Below illustrates how <p> with a font-size of 14px and a line-height of 21px, align perfectly with the vertical rhythm.
Each p-tag has a set margin-bottom of 21px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed commodo elit. Nulla eget nisi justo. Nullam mauris massa, maximus in turpis et, facilisis porttitor nunc. Vivamus vel dolor et enim tincidunt placerat. In tempus, est eget eleifend luctus, nunc ante vestibulum massa, at commodo augue justo in enim. Morbi rutrum mi ut mauris aliquam, eget placerat sem ultricies. Fusce lobortis gravida venenatis. Nullam ac velit placerat, dignissim odio pretium, suscipit diam.
Pellentesque lacus neque, consequat sit amet pulvinar vel, molestie at eros. Curabitur quis nibh tincidunt risus volutpat eleifend. Proin facilisis tincidunt pulvinar. Aliquam pharetra sagittis risus at maximus. Maecenas congue lectus sed sem molestie, in eleifend tortor vulputate.
Font weight
Heavy font weight
Medium font weight
Light font weight
<div class="example">
<h1 class="text-inter-heavy">Heavy font weight</h1>
<h1 class="text-inter-medium">Medium font weight</h1>
<h1 class="text-inter-light">Light font weight</h1>
</div>