Typography

Typography in Droplets inherits its properties from the platform or the environment. Font family and font sizes will varies depending on the platform. By inheriting the platform's properties, Droplets ensures the typography will match the aesthetic of the platform.

Headings

Six levels of headings are available in HTML. The heading elements are defined with h1 to h6 with h1 being the highest or most important and h6 the least.

                        <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

The HTML p element defines a paragraph. Paragraph is used to compose the body content of a HTML page.

                        <p>I am a paragraph.</p>
<p>I am a paragraph too.</p>

I am a paragraph.

I am a paragraph too.

Lead Paragraph

A lead paragraph is a paragraph that stands out among the rest of the page contents. To create a lead, apply the lead class to a p element.

<p class="lead">The room was dingy and windowless, lit by a single oil lamp dangling from the low ceiling.</p>

The room was dingy and windowless, lit by a single oil lamp dangling from the low ceiling.

Drop Cap

A large initial letter (or icon) that drops below the first line of a paragraph, usually used at the beginning of a page. Apply the class dropcap to the p element to achieve this style.

<p class="dropcap">The horses galloped into the middle of the dance floor and halted, rearing and plunging. At the front of the pack was a large ghost who held his bearded head under his arm, from which position he was blowing the horn.</p>

The horses galloped into the middle of the dance floor and halted, rearing and plunging. At the front of the pack was a large ghost who held his bearded head under his arm, from which position he was blowing the horn.

First Line Indentation

Indent the first line of a paragraph by adding the indent class to the p element.

<p class="indent">Another time, Aunt Petunia had been trying to force him into a revolting old sweater of Dudley's (brown with orange puff balls). The harder she tried to pull it over his head, the smaller it seemed to become, until finally it might have fitted a hand puppet, but certainly wouldn't fit Harry. Aunt Petunia had decided it must have shrunk in the wash and, to his great relief, Harry wasn't punished.</p>

Another time, Aunt Petunia had been trying to force him into a revolting old sweater of Dudley's (brown with orange puff balls). The harder she tried to pull it over his head, the smaller it seemed to become, until finally it might have fitted a hand puppet, but certainly wouldn't fit Harry. Aunt Petunia had decided it must have shrunk in the wash and, to his great relief, Harry wasn't punished.

All Line Indentation

Indent all lines of a paragraph by adding the indent-all class to the p element.

<p class="indent-all">Another time, Aunt Petunia had been trying to force him into a revolting old sweater of Dudley's (brown with orange puff balls). The harder she tried to pull it over his head, the smaller it seemed to become, until finally it might have fitted a hand puppet, but certainly wouldn't fit Harry. Aunt Petunia had decided it must have shrunk in the wash and, to his great relief, Harry wasn't punished.</p>

Another time, Aunt Petunia had been trying to force him into a revolting old sweater of Dudley's (brown with orange puff balls). The harder she tried to pull it over his head, the smaller it seemed to become, until finally it might have fitted a hand puppet, but certainly wouldn't fit Harry. Aunt Petunia had decided it must have shrunk in the wash and, to his great relief, Harry wasn't punished.

Hanging Indentation

Indent all lines except the first line of a paragraph by adding the hanging-indent class to a p element.

<p class="hanging-indent">Another time, Aunt Petunia had been trying to force him into a revolting old sweater of Dudley's (brown with orange puff balls). The harder she tried to pull it over his head, the smaller it seemed to become, until finally it might have fitted a hand puppet, but certainly wouldn't fit Harry. Aunt Petunia had decided it must have shrunk in the wash and, to his great relief, Harry wasn't punished.</p>

Another time, Aunt Petunia had been trying to force him into a revolting old sweater of Dudley's (brown with orange puff balls). The harder she tried to pull it over his head, the smaller it seemed to become, until finally it might have fitted a hand puppet, but certainly wouldn't fit Harry. Aunt Petunia had decided it must have shrunk in the wash and, to his great relief, Harry wasn't punished.

The indent, indent-all, and hanging-indent class can also be applied to a div element. All paragraphs inside the div element will have the respective style applied.

Hyperlink

A hyperlink is a HTML link. It takes you from one HTML page to another. Link is defined with the use of a element.

<p>He gave a hearty guffaw and clapped <a href="https://www.google.com/search?q=Nearly+Headless+Nick">Nearly Headless Nick</a> on the shoulder.</p>

He gave a hearty guffaw and clapped Nearly Headless Nick on the shoulder.

To have the link open in a separate browser window or tab, add the target attribute with value of _blank to the a element.

Bold

To represent a important term or phrase with a heavier font weight, use the strong element. Changing the importance of a piece of text with strong element does not and should not change the meaning of the sentence of a paragraph.

Per HTML5 specification, the <b> element should be used as a last resort.

<p>Perhaps it had something to do with living in a <strong>dark</strong> cupboard.</p>

Perhaps it had something to do with living in a dark cupboard.

Italic

To emphasize a term or phrase with a slightly slanted font style, use the em element. The placement of em element changes the meaning of the sentence.

Per HTML5 specification, the <i> element should be used as a last resort.

<p>Harry didn't look it, but he was very  <em>fast</em>.</p>

Harry didn't look it, but he was very fast.

Underline

To emphasize content with an underline, use a span element with an underline class.

<p>He had a <span class="underline">large pink face</span>, not much neck, small, watery blue eyes, and thick blond hair that lay smoothly on his thick, fat head.</p>

He had a large pink face, not much neck, small, watery blue eyes, and thick blond hair that lay smoothly on his thick, fat head.

Do not over use underlines. Underlines are frown upon because they are default hyperlink style.

Do not use <u> or <ins> element for underlining. The <u> element has been redefined in HTML5 for other purpose with semantic meanings. The <ins> element represents that a text has been inserted into a document. By default, web browser renders both <u> and <ins> elements with an underline; however, the style of each element is solely dependent on the default CSS style definition of the web browser.

Alignments

Align paragraph by adding the left, center, right, or justify class.

<p class="left">The snake nodded vigorously.</p>
<p class="center">The snake nodded vigorously.</p>
<p class="right">The snake nodded vigorously.</p>
<p class="justify">Harry sat up and gasped; the glass front of the boa constrictor's tank had vanished. The great snake was uncoiling itself rapidly, slithering out onto the floor. People throughout the reptile house screamed and started running for the exits.</p>

The snake nodded vigorously.

The snake nodded vigorously.

The snake nodded vigorously.

Harry sat up and gasped; the glass front of the boa constrictor's tank had vanished. The great snake was uncoiling itself rapidly, slithering out onto the floor. People throughout the reptile house screamed and started running for the exits.

Line Break

Move to a new line inside a p element by using the br element.

For HTML5, simple <br> is sufficient. For XHTML compatible, use <br />.

<p>"Where do you come from, anyway?" Harry asked.<br>
The snake jabbed its tail at a little sign next to the glass. Harry peered at it.<br>
Boa Constrictor, Brazil.<br>
"Was it nice there?"</p>

"Where do you come from, anyway?" Harry asked.
The snake jabbed its tail at a little sign next to the glass. Harry peered at it.
Boa Constrictor, Brazil.
"Was it nice there?"

Small

To de-emphasize or decrease font size, use the small element.

<p><small>But today, nothing was going to go wrong.</small></p>

But today, nothing was going to go wrong.

Color

Convey meanings through colors by using the following classes: text-info (light-blue), text-success (green), text-warning (yellow), and text-danger (red).

<p>The snake suddenly <span class="text-info">opened</span> its beady eyes. Slowly, very slowly, it <span class="text-danger">raised</span> its head until its eyes were on a <span class="text-success">level</span> with Harry's.</p>
<p class="text-danger">It winked.</p>

The snake suddenly opened its beady eyes. Slowly, very slowly, it raised its head until its eyes were on a level with Harry's.

It winked.

Code

Differentiate code text from regular text with the use of code element.

<p><code>var whoAmI = (isWizard) ? 'A Wizard!' : 'I am a what?';</code></p>

var whoAmI = (isWizard) ? 'A Wizard!' : 'I am a what?';

Blockquote

To quote a block of content from another source or a passage from a famous person or literature.

<blockquote>
  <p>When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story starts, there was nothing about the cloudy sky outside to suggest that strange and mysterious things would soon be happening all over the country.</p>
  <p class="author">Harry Potter and the Sorcerer's Stone (page 2)</p>
</blockquote>

When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story starts, there was nothing about the cloudy sky outside to suggest that strange and mysterious things would soon be happening all over the country.

Harry Potter and the Sorcerer's Stone (page 2)

To right align a blockquote element, add the pull-right class. The quote will right aligned on the page with the gray border on the right.

Alternative

To change the gray border into a quotation mark, add the with-quote-mark class to the blockquote element.

<blockquote class="quote">
  <p>When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story starts, there was nothing about the cloudy sky outside to suggest that strange and mysterious things would soon be happening all over the country.</p>
  <p class="author">Harry Potter and the Sorcerer's Stone (page 2)</p>
</blockquote>

When Mr. and Mrs. Dursley woke up on the dull, gray Tuesday our story starts, there was nothing about the cloudy sky outside to suggest that strange and mysterious things would soon be happening all over the country.

Harry Potter and the Sorcerer's Stone (page 2)

List

HTML defines two type of list: unordered and ordered.

Unordered

An unordered list is a list of items with no specific order. It is created with the ul element. Within the ul element, each list item is created with the li element.

<ul>
  <li>Muggle Studies</li>
  <li>Charms</li>
  <li>Potions</li>
  <li>Flying</li>
</ul>
  • Muggle Studies
  • Charms
  • Potions
  • Flying

Ordered

An ordered list is a list of items in specific order. It is created with the ol element. Within the ol element, each list item is created with the li element.

<ol>
  <li>Muggle Studies</li>
  <li>Charms</li>
  <li>Potions</li>
  <li>Flying</li>
</ol>
  1. Muggle Studies
  2. Charms
  3. Potions
  4. Flying

Unordered or ordered list can be nested within each other.

No Bullets

To create a list of items without bullet style, add the no-bullet class. All nested ol and ul elements will not have bullet.

<ul class="no-bullet" role="presenation">
  <li>Muggle Studies
    <ol>
      <li>Muggle Art</li>
      <li>Muggle Music</li>
    </ol>
  </li>
  <li>Charms</li>
  <li>Potions</li>
  <li>Flying</li>
</ul>

Accessibility Tip

A list with no bullets, especially if it contains nested unordered and ordered list, may have accessibility concern. It may have achieved the preferred visual structure, but to screen reader, it is still a list and will convey it as a list element to the user with unintended additional semantic information. Adding role="presentation" will remove the semantic meaning from the list element.

Horizontal Rule

Create a horizontal line to separate paragraphs.

For HTML5, simple <hr> is sufficient. For XHTML compatible, use <hr />.

<p>Here stood the hundred or so horseless stagecoaches that always took the students above first year up to the castle. Harry glanced quickly at them, turned away to keep a lookout for Ron and Hermione, then did a double take.</p>
<hr>
<p>A short distance away, Draco Malfoy, followed by a small gang of cronies including Crabbe, Goyle, and Pansy Parkinson, was pushing some timid-looking second years out of the way so that they could get a coach to themselves. Seconds later Hermione emerged panting from the crowd.</p>

Here stood the hundred or so horseless stagecoaches that always took the students above first year up to the castle. Harry glanced quickly at them, turned away to keep a lookout for Ron and Hermione, then did a double take.


A short distance away, Draco Malfoy, followed by a small gang of cronies including Crabbe, Goyle, and Pansy Parkinson, was pushing some timid-looking second years out of the way so that they could get a coach to themselves. Seconds later Hermione emerged panting from the crowd.

Buttons

Buttons are created by using a or button element with the btn class. For variations, append info, success, warning, or danger to the class. By default, button is an inline level element. To make it into a block level element, append block to the class.

<p><a class="btn" href="#">Default</a> <a class="btn info" href="#">Info</a> <a class="btn success" href="#">Success</a> <a class="btn warning" href="#">Warning</a></p>
<a class="btn danger block" href="#">Danger</a>

Label

Label is created by using span element with the label class. For variations, append info, success, warning, or danger to the class.

<p><span class="label">Default</span> <span class="label info">Info</span> <span class="label success">Success</span> <span class="label warning">Warning</span> <span class="label danger">Danger</span></p>

Default Info Success Warning Danger

Highlight

Highlight is created by using span element with the highlight class.

<p>Harry grabbed Ron’s arm and wheeled him about so that he was <span class="highlight" aria-label="highlighted">face-to-face</span> with the winged horse.</p>

Harry grabbed Ron’s arm and wheeled him about so that he was face-to-face with the winged horse.

Accessibility Tip

When a term or phrase is highlighted, screen reader will not be aware of the visual cue. To make it known to the screen reader, add aria-label="highlighted" to the span element.