Foundation CSS Typography & Utilities

Pro Tip: Foundation uses REM units for typography and spacing, which scale with the root font size.

Foundation provides a comprehensive set of typography styles and utility classes to help you build consistent, responsive designs quickly.

📝 Typography
# Headings & Display
✨ Text Utilities
📋 Lists

📏 Spacing Utilities
👁️ Visibility Classes
📍 Positioning
🎨 Color Utilities

📝 Typography Basics

Live Preview: Base Typography

This is a regular paragraph with Foundation's default styling. The base font size is 1rem (16px) with 1.5 line height.

Light weight text

Normal weight text

Bold weight text

Foundation Code Equivalent:

<p>This is a regular paragraph</p>
<p class="text-light">Light weight text</p>
<p class="text-normal">Normal weight text</p>
<p class="text-bold">Bold weight text</p>

# Headings & Display Classes

Default Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Subheaders

Main Heading Subheading

Section Title Section subtitle

Display Classes

Display 1

Display 6

Foundation Headings Code:

<!-- Default Headings -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>

<!-- With Subheader -->
<h1>Main Heading <small>Subheading</small></h1>

<!-- Display Classes -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-6">Display 6</h1>

✨ Text Utilities

Alignment

Left aligned text

Center aligned text

Right aligned text

Transformation

LOWERCASE TEXT

uppercase text

capitalized text

Decoration & Style

Underlined text

Strikethrough text

Link without underline

Font Style

Italic text

Normal font style

Responsive Text Alignment

Center on mobile, left on medium+

Right on mobile, center on large+

Foundation Code:

<!-- Alignment -->
<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>

<!-- Responsive Alignment -->
<p class="text-center medium-text-left">Center on small, left on medium+</p>
<p class="text-right large-text-center">Right on small, center on large+</p>

<!-- Transformation -->
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalized text</p>

📋 Lists

Unordered List

Item 1
Item 2
- Nested item 1
- Nested item 2
Item 3

Ordered List

First item
Second item
Third item

Description List

Term 1: Definition for term 1
Term 2: Definition for term 2

Inline List

Item 1
Item 2
Item 3

📏 Spacing Utilities

Note: Foundation uses a spacing scale based on REM units. The scale goes from 0 to 3 (0, 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem).

Margin Examples

No margin

Margin top 3

Margin horizontal 4

Margin vertical 5

Margin all sides 2

Padding Examples

Padding 1

Padding top 3

Padding horizontal 4

Padding vertical 5

Padding all sides 4

Responsive Spacing

Padding: 2 on mobile, 4 on medium, 5 on large

Foundation Spacing Classes:

<!-- Margin -->
<div class="margin-0">No margin</div>
<div class="margin-top-1">Margin top 1</div>
<div class="margin-horizontal-2">Margin horizontal 2</div>
<div class="margin-3">Margin all sides 3</div>

<!-- Padding -->
<div class="padding-1">Padding 1</div>
<div class="padding-top-2">Padding top 2</div>
<div class="padding-horizontal-3">Padding horizontal 3</div>
<div class="padding-4">Padding all sides 4</div>

<!-- Responsive -->
<div class="small-padding-1 medium-padding-2 large-padding-3">
  Responsive padding
</div>

👁️ Visibility Classes

Show/Hide by Screen Size

Visible only on mobile

Visible only on medium screens

Visible only on large screens

Foundation Visibility Classes:

<!-- Show only on specific screens -->
<div class="show-for-small-only">Visible only on mobile</div>
<div class="show-for-medium-only">Visible only on medium</div>
<div class="show-for-large">Visible only on large+</div>

<!-- Hide on specific screens -->
<div class="hide-for-small">Hidden on mobile</div>
<div class="hide-for-medium">Hidden on medium</div>
<div class="hide-for-large">Hidden on large+</div>

<!-- Orientation -->
<div class="show-for-landscape">Visible in landscape</div>
<div class="show-for-portrait">Visible in portrait</div>

<!-- Screen Reader Only -->
<p class="show-for-sr">Screen reader only text</p>
<p class="show-on-focus">Visible on focus (for accessibility)</p>

📍 Positioning Utilities

Top Left

Top Right

Centered

Bottom Left

Bottom Right

<!-- Positioning -->
<div class="position-relative" style="height: 200px;">
  <div class="position-absolute top-0 left-0">Top Left</div>
  <div class="position-absolute top-0 right-0">Top Right</div>
  <div class="position-absolute middle-center">Centered</div>
  <div class="position-absolute bottom-0 left-0">Bottom Left</div>
  <div class="position-absolute bottom-0 right-0">Bottom Right</div>
</div>

<!-- Fixed Positioning -->
<div class="position-fixed top-0">Fixed to top</div>
<div class="position-fixed bottom-0">Fixed to bottom</div>

<!-- Sticky -->
<div class="position-sticky top-0">Sticky header</div>

🎨 Color Utilities

Primary

Secondary

Success

Warning

Danger

Info

Light

Dark

Text Colors

Primary text

Success text

Danger text

Warning text on dark

Muted text

Foundation Color Classes:

<!-- Background Colors -->
<div class="primary">Primary background</div>
<div class="secondary">Secondary background</div>
<div class="success">Success background</div>
<div class="warning">Warning background</div>
<div class="alert">Alert background</div>

<!-- Text Colors -->
<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>

<!-- Light/Dark Text -->
<p class="light-color">Light text (on dark bg)</p>
<p class="dark-color">Dark text (on light bg)</p>

<!-- Muted Text -->
<p class="muted">Muted text</p>

🎯 Practice Exercise

Create a responsive card component using only Foundation utility classes that:

Has a centered heading with muted subtitle
Uses appropriate spacing (margin/padding)
Is hidden on mobile but visible on tablet and desktop
Has primary background with white text
Includes a positioned badge in the top-right corner

<div class="card hide-for-small-only">
  <div class="card-divider position-relative">
    <h4 class="text-center">
      Card Title 
      <small class="muted">Subtitle</small>
    </h4>
    <span class="badge warning position-absolute top-0 right-0">
      New
    </span>
  </div>
  <div class="card-section primary text-white padding-3">
    <p class="margin-bottom-2">Card content with proper spacing.</p>
    <button class="button success margin-top-2">
      Action Button
    </button>
  </div>
</div>

Foundation CSS Tutorial