Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 11081

2.1 Basic Typography

Basic Typography is unstyled and relys on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves the reading of content text lacking. The overriding styles that are applied to Basic typography is a consistent font treatment (font sizing, font family, and font-weight) and what comes from the baseline frameworks that build the brand.

Example

Default styling

Basic Typography: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor aenean massa

Cut sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus

Donec quam felis ultricies nec pellentesque eu pretium quis sem nlla consequat massa quis enim

Donec pede justo fringilla vel aliquet nec vulputate eget arcu
In enim justo rhoncus ut imperdiet a venenatis vitae justo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

This paragraph is nested inside an article. It contains many different, sometimes useful, HTML5 tags. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. You can define deleted text which often gets replaced with inserted text.

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes below, the quote tag lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) tags.

<h1>Basic Typography: <small>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.</small></h1>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<h3>Cut sociis natoque penatibus et magnis dis
parturient montes nascetur ridiculus mus</h3>
<h4>Donec quam felis ultricies nec pellentesque eu
pretium quis sem nlla consequat massa quis enim</h4>
<h5>Donec pede justo fringilla vel aliquet nec vulputate
eget arcu</h5>
<h6>In enim justo rhoncus ut imperdiet a venenatis vitae
justo</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.</p>
<article><p>This paragraph is nested inside an article. It contains many different, sometimes useful, <a href="https://www.w3schools.com/tags/">HTML5 tags</a>. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>, and <small>small</small> but there are many others as well. Hover the following text for abbreviation tag: <abbr title="abbreviation">abbr</abbr>. Similarly, you can use acronym tag like this: <acronym title="For The Win">ftw</acronym>. You can define <del>deleted text</del> which often gets replaced with <ins>inserted</ins> text.</p><p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code>&lt;code&gt;</code> or <samp>samp</samp> tags. Even more specifically, there is a tag just for <var>variables</var>. Not to be mistaken with blockquotes below, the quote tag lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags.</p></article>
Copy Code