Foundation Typography
Foundation provides a clean, responsive typographic system with proper hierarchy and readability.
Headings
Foundation includes styles for all HTML headings from <h1> to <h6>.
Live Preview: Heading Hierarchy
h1. Foundation Heading
h2. Foundation Heading
h3. Foundation Heading
h4. Foundation Heading
h5. Foundation Heading
h6. Foundation Heading
Foundation Code:
<h1>h1. Foundation Heading</h1> <h2>h2. Foundation Heading</h2> <h3>h3. Foundation Heading</h3> <h4>h4. Foundation Heading</h4> <h5>h5. Foundation Heading</h5> <h6>h6. Foundation Heading</h6>
Paragraphs and Body Text
Live Preview: Paragraph Styles
This is a regular paragraph. Foundation sets basic global styles including font family, line height, and margin.
This is a lead paragraph. It stands out with larger font size and different styling.
This is small text, useful for disclaimers or secondary information.
Foundation Code:
<p>This is a regular paragraph.</p> <p class="lead">This is a lead paragraph.</p> <p class="text-small">This is small text.</p> <!-- Using Foundation's text size classes --> <p class="text-smaller">Smaller text</p> <p class="text-larger">Larger text</p>
Text Alignment
Live Preview: Text Alignment
Left aligned text (default)
Center aligned text
Right aligned text
Justified text: This text is justified to fill the container width evenly. It creates clean edges on both sides of the text block.
Foundation Code:
<p class="text-left">Left aligned text</p> <p class="text-center">Center aligned text</p> <p class="text-right">Right aligned text</p> <p class="text-justify">Justified text</p> <!-- Responsive text alignment --> <p class="medium-text-center">Center on medium+ screens</p> <p class="large-text-right">Right on large+ screens</p>
Lists
Live Preview: List Styles
Unordered List
- List item one
- List item two
- Nested list item
- Another nested item
- List item three
Ordered List
- First list item
- Second list item
- Nested ordered item
- Another nested item
- Third list item
Unstyled List
- No bullet points
- Clean list style
- Perfect for navigation
Foundation Code:
<!-- Unordered List -->
<ul>
<li>List item one</li>
<li>List item two
<ul>
<li>Nested list item</li>
</ul>
</li>
</ul>
<!-- Ordered List -->
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<!-- No-bullet List -->
<ul class="no-bullet">
<li>No bullet points</li>
<li>Clean list style</li>
</ul>Text Styles and Emphasis
Live Preview: Text Formatting
You can use bold text to emphasize important content.
Use italic text for subtle emphasis or citations.
This line of text is meant to be treated as fine print.
You can highlight text to draw attention.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
Foundation Code:
<p>You can use <strong>bold text</strong> to emphasize.</p> <p>Use <em>italic text</em> for subtle emphasis.</p> <p><small>This is fine print.</small></p> <p>You can <mark>highlight text</mark> to draw attention.</p> <p><del>This is deleted text.</del></p> <p><ins>This is inserted text.</ins></p> <p><u>This is underlined text.</u></p> <!-- Using Foundation classes --> <p class="subheader">This is a subheader</p> <p class="stat">This is for statistics</p>
Blockquotes
Live Preview: Blockquotes
This is a well-formatted blockquote. It's perfect for highlighting important quotes or excerpts from other sources.
Center aligned blockquote for special emphasis.
Foundation Code:
<blockquote> <p>This is a well-formatted blockquote.</p> <cite>Someone Famous</cite> </blockquote> <!-- Blockquote with alignment --> <blockquote class="text-center"> <p>Center aligned blockquote.</p> <cite>Another Person</cite> </blockquote> <!-- Using Foundation's blockquote styles --> <blockquote class="quote-primary"> <p>Primary styled blockquote.</p> </blockquote>
Text Transformation
Live Preview: Text Case Transformation
LOWERCASE TEXT (converted to lowercase)
uppercase text (converted to uppercase)
capitalized text (each word capitalized)
Foundation Code:
<p class="text-lowercase">LOWERCASE TEXT</p> <p class="text-uppercase">uppercase text</p> <p class="text-capitalize">capitalized text</p> <!-- Using text transform utilities --> <p class="text-uppercase">Uppercase text</p> <p class="text-lowercase">Lowercase Text</p> <p class="text-capitalize">capitalized sentence</p>
Code and Preformatted Text
Live Preview: Code Display
Inline code: <section> should be wrapped as inline.
Use ctrl + c to copy text.
// Code block example
function helloWorld() {
console.log("Hello, Foundation!");
return true;
}Foundation Code:
<!-- Inline code -->
<p>Inline code: <code><section></code> should be wrapped as inline.</p>
<!-- Keyboard input -->
<p>Use <kbd>ctrl + c</kbd> to copy text.</p>
<!-- Code block -->
<pre><code>// Code block example
function helloWorld() {
console.log("Hello, Foundation!");
}</code></pre>
<!-- Foundation code styles -->
<code class="code-block">Multi-line code block</code>Text Colors
Live Preview: Text Color Utilities
Foundation Code:
<p class="text-primary">Primary text</p> <p class="text-secondary">Secondary text</p> <p class="text-success">Success text</p> <p class="text-warning">Warning text</p> <p class="text-alert">Alert text</p> <p class="text-muted">Muted text</p> <!-- Using Foundation's color classes --> <p class="primary">Primary colored text</p> <p class="secondary">Secondary colored text</p> <p class="success">Success colored text</p> <p class="warning">Warning colored text</p> <p class="alert">Alert colored text</p>
Responsive Typography
Live Preview: Responsive Text
This heading scales with screen size
This paragraph text adjusts based on screen size for optimal readability.
This text changes alignment across breakpoints.
Foundation Code:
<!-- Responsive heading sizes --> <h1 class="small-12 medium-10 large-8">Responsive heading</h1> <!-- Responsive text alignment --> <p class="text-left medium-text-center large-text-right"> Responsive alignment </p> <!-- Responsive text sizing --> <p class="small-12 medium-10 large-8"> This text container scales with screen size </p> <!-- Foundation responsive text classes --> <p class="show-for-small-only">Visible only on small screens</p> <p class="show-for-medium">Visible on medium and larger</p> <p class="hide-for-large">Hidden on large screens</p>
Typography Best Practices
| Element | Usage | Example |
|---|---|---|
| Headings | Create clear content hierarchy | <h1> to <h6> |
| Lead Paragraph | Introduce content sections | .lead |
| Lists | Organize related items | <ul>, <ol> |
| Blockquotes | Highlight quotes and citations | <blockquote> |
| Code | Display code snippets | <code>, <pre> |
| Text Utilities | Quick text formatting | .text-center, .text-uppercase |
Pro Tip: Customizing Typography
Foundation's typography can be easily customized using Sass variables. You can modify font families, sizes, weights, and line heights to match your brand identity.
Up next: Foundation Buttons →
