Foundation Text

Foundation Default Settings

Foundation uses the browser 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", line-height defaults to1.5。

The default settings above all apply to<body>Element.

Foundation Typography Design

In this chapter, we will discuss Foundation's typography design.

To view the actual style of the following examples, please click the "Try it" button.

<h1> - <h6>

HTML headings rendered by Foundation<h1>to<h6>) as shown below:

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>

Try it Yourself »

Tip:If you need to create a light-colored heading, you can add to the element.subheaderClass:

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>

Try it Yourself »

<small>

In Foundation, HTML<small>element is used to create a light-colored subheading:

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>

Try it Yourself »

<a>

Foundation <a>The style of the element is as follows:

Example

<p>This is a<a class="a" href="#">Links</a>。</p>

Try it Yourself »

<abbr>

Foundation <abbr>The style of the element is as follows:

Example

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

Try it Yourself »

<blockquote>

Foundation <blockquote>The style of the element is as follows:

Example

<blockquote> <p>What you learn is not only technology, but also dreams!</p> <cite>Example</cite> </blockquote>

Try it Yourself »

<dl>

Foundation <dl>The style of the element is as follows:

Example

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

Try it Yourself »

<code>

Foundation <code>The style of the element is as follows:

Example

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

Try it Yourself »

<kbd>

Foundation <kbd>The style of the element is as follows:

Example

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

Try it Yourself »

<hr>

Foundation <hr>The style of the element is as follows:

Example

<hr>

Try it Yourself »
other extensions