Foundation text


May 04, 2021 11:00 Foundation5


Table of contents


Foundation text

Foundation default settings

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

The default settings above are for the element of <body>


Foundation text arrangement design

In this section, we'll discuss the text arrangement design of the Foundation.

The true style of the following example can be viewed by clicking the "Try it" button.


<h1> - <h6>

The HTML title of the Foundation rendering ( <h1> <h6> is as follows:

Instance

< h1 and h1 Title slt;/h1 >
< h2 and h2 Title slt;/h2 >
< h3 and h3 Title slt;/h3 >
< h4 and h4 Title slt;/h4 >
< h5 and h5 Title slt;/h5 >
< h6 and h6 Title slt;/h6 >

Try it out . . .

Tip: If you need to create a light title, you can add the .subheader element:

Instance

< 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 out . . .

<small>

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

Instance

<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 out . . .

<a>

The <a> Foundation element is as follows:

Instance

This is a link.


Try it out . . .

<abbr>

The <abbr> Foundation element is as follows:

Instance

The WHO was founded in 1948.


Try it out . . .

<blockquote>

The <blockquote> is as follows:

Instance

Learn technology, start with W3Cschool!

W3Cschool online tutorial

Try it out . . .

<dl>

The <dl> Foundation element is as follows:

Instance

Coffee
- black hot drink
Milk
- white cold drink

Try it out . . .

<code>

The <code> element looks like this:

Instance

The following HTML elements are: . </p>


Try it out . . .

<kbd>

The <kbd> element looks like this:

Instance

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


Try it out . . .

<hr>

The <hr> Foundation element is as follows:

Instance

<hr>

Try it out . . .