❮ Foundation Joyride Foundation Labels ❯

Foundation Text

Foundation Default Settings

Foundation uses the browser's default font size (font-size:100%). For most desktop browsers, the default font size is 16px. For most mobile browsers, the default font size is 12px. The default font is "Helvetica Neue", and the default line-height is 1.5.

These default settings apply to the <body> element.

Foundation Text Alignment Design

In this section, we will discuss Foundation's text alignment design.

To see the actual styles of the following examples, click the "Try it" button.

<h1> - <h6>

Foundation renders HTML headings (<h1> to <h6>) as follows:

Example

<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Tip: To create a lighter heading, you can add the .subheader class to the element:

Example

<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>

<small>

In Foundation, the HTML <small> element is used to create a lighter secondary heading:

Example

<h1>h1 Heading <small>secondary text</small></h1>
<h2>h2 Heading <small>secondary text</small></h2>
<h3>h3 Heading <small>secondary text</small></h3>
<h4>h4 Heading <small>secondary text</small></h4>
<h5>h5 Heading <small>secondary text</small></h5>
<h6>h6 Heading <small>secondary text</small></h6>

<a>

Foundation's <a> element is styled as follows:

Example

<p>This is a <a class="a" href="#">link</a>.</p>

<abbr>

Foundation's <abbr> element is styled as follows:

Example

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<blockquote>

Foundation's <blockquote> element is styled as follows:

Example

<blockquote>
  <p>Learning is not just about technology, it's about dreams!</p>
  <cite>tutorialpro.org</cite>
</blockquote>

<dl>

Foundation's <dl> element is styled as follows:

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

<code>

Foundation's <code> element is styled as follows:

Example

<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> are part of the document.</p>

<kbd>

Foundation's <kbd> element is styled as follows:

Example

<p>Press <kbd>ctrl + p</kbd> to open the print window.</p>

<hr>

Foundation's <hr> element is styled as follows:

Example

<hr>

❮ Foundation Joyride Foundation Labels ❯