Foundation Typography

Foundation provides rich typography styles to help you create beautiful, readable text content. This chapter will detail the text and typography features of Foundation.

Headings

Foundation supports all six HTML heading levels (h1-h6):

<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 Default Sizes

Heading	Mobile Size	Desktop Size
h1	24px	48px
h2	20px	40px
h3	19px	31px
h4	18px	25px
h5	17px	20px
h6	16px	16px

Subheadings

Use the <small> tag to create subheadings:

<h1>Main Heading <small>Subheading</small></h1>
<h2>Main Heading <small>Subheading</small></h2>

Paragraphs

Basic paragraph styles:

<p>This is a normal paragraph. Foundation's default paragraph font size is 16px with a line height of 1.6.</p>

Lead Paragraph

Use the .lead class to create prominent lead paragraphs:

<p class="lead">This is a lead paragraph. The font size is larger, suitable for article introductions or important descriptions.</p>

Text Styles

Bold and Italic

<p><strong>Bold text</strong> using strong tag</p>
<p><b>Bold text</b> using b tag</p>
<p><em>Italic text</em> using em tag</p>
<p><i>Italic text</i> using i tag</p>

Small Text

<p><small>This is small text</small></p>

Highlighted Text

<p>This is <mark>highlighted</mark> text.</p>

Strikethrough and Underline

<p><del>Deleted text</del></p>
<p><s>No longer accurate text</s></p>
<p><ins>Newly inserted text</ins></p>
<p><u>Underlined text</u></p>

Text Alignment

Foundation provides text alignment classes:

<p class="text-left">Left aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-justify">Justified text. This text will automatically adjust word spacing so both left and right sides of each line are aligned.</p>

Responsive Text Alignment

You can set different alignments for different screen sizes:

<!-- Center on small screens, left aligned on medium screens -->
<p class="small-text-center medium-text-left">Responsive alignment</p>

<!-- Left aligned on small screens, right aligned on large screens -->
<p class="small-text-left large-text-right">Responsive alignment</p>

Common responsive classes:

• small-text-left, small-text-center, small-text-right, small-text-justify
• medium-text-left, medium-text-center, medium-text-right, medium-text-justify
• large-text-left, large-text-center, large-text-right, large-text-justify

Lists

Unordered Lists

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3
        <ul>
            <li>Nested item 1</li>
            <li>Nested item 2</li>
        </ul>
    </li>
</ul>

Ordered Lists

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

No-bullet Lists

Use the .no-bullet class to remove list symbols:

<ul class="no-bullet">
    <li>List item without symbol</li>
    <li>List item without symbol</li>
    <li>List item without symbol</li>
</ul>

Definition Lists

<dl>
    <dt>Term Title</dt>
    <dd>Definition and explanation of the term.</dd>

    <dt>Another Term</dt>
    <dd>Definition of another term.</dd>
</dl>

Blockquotes

Blockquote

<blockquote>
    This is a blockquote text. Blockquotes are typically used to display content from other sources.
    <cite>— Citation Source</cite>
</blockquote>

Code

Inline Code

<p>Use <code>code</code> tag to display inline code.</p>

Code Blocks

<pre>
<code>
function sayHello() {
    console.log("Hello, Foundation!");
}
</code>
</pre>

Keyboard Input

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

Abbreviations

<p><abbr title="Hypertext Markup Language">HTML</abbr> is the foundation of web pages.</p>

Text Colors

Foundation provides predefined color classes:

<p class="primary-color">Primary color text</p>
<p class="secondary-color">Secondary color text</p>
<p class="success-color">Success color text</p>
<p class="warning-color">Warning color text</p>
<p class="alert-color">Alert color text</p>

Stat Numbers

Use the .stat class to create large number displays:

<div class="stat">
    10,000
    <span class="stat-label">User Count</span>
</div>

Responsive Typography

Foundation's typography automatically adjusts based on screen size. You can also use the following classes for manual control:

Show/Hide Text

<!-- Show only on small screens -->
<p class="show-for-small-only">Only visible on phones</p>

<!-- Show on medium and above screens -->
<p class="show-for-medium">Visible on tablets and computers</p>

<!-- Show only on large screens -->
<p class="show-for-large">Only visible on large screens</p>

Accessibility

Screen Reader Classes

<!-- Visually hidden, but screen reader can read -->
<span class="show-for-sr">This text is only readable by screen readers</span>

<!-- Show on focus (skip links) -->
<a class="show-on-focus" href="#main-content">Skip to main content</a>

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Text Examples</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell">
                <h1>Article Heading <small>Subheading</small></h1>

                <p class="lead">This is the article's lead paragraph, used to summarize the article's main content.</p>

                <h2>First Chapter</h2>
                <p>This is normal paragraph text. You can use <strong>bold</strong>, <em>italic</em>, <mark>highlight</mark>, and other styles.</p>

                <blockquote>
                    Learning is a continuous process. Foundation can help you build websites more efficiently.
                    <cite>— Web Developer</cite>
                </blockquote>

                <h3>Code Examples</h3>
                <p>Use <code>.lead</code> class to create lead paragraphs.</p>

                <h3>Feature List</h3>
                <ul>
                    <li>Responsive design</li>
                    <li>Rich components</li>
                    <li>Highly customizable</li>
                </ul>

                <p class="text-center">
                    <small>Copyright &copy; 2024</small>
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Summary

In this chapter, we learned:

• Headings and subheadings usage
• Various text styles (bold, italic, highlight, etc.)
• Text alignment methods
• Creating lists
• Blockquotes and code display
• Accessibility support

In the next chapter, we will learn about Foundation Tables.

---

Tip: Foundation's typography uses rem units by default, based on the root element's font size, making overall scaling more flexible.