Bulma Typography

Bulma provides a comprehensive typography system that makes it easy to create beautiful, readable text across all devices. The system includes predefined font sizes, weights, families, and responsive text utilities.

Basic Typography Elements

Bulma styles all basic HTML typography elements with sensible defaults that work well together.

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Text Elements

<p>This is a paragraph of text.</p>
<p><small>This is small text.</small></p>
<p><strong>This is bold text.</strong></p>
<p><em>This is italic text.</em></p>
<p><u>This is underlined text.</u></p>
<p><s>This is strikethrough text.</s></p>
<p><mark>This is marked text.</mark></p>
<p><code>This is code text.</code></p>
<p><kbd>This is keyboard text.</kbd></p>
<p><abbr title="abbreviation">This is abbreviation text.</abbr></p>
<p><cite>This is citation text.</cite></p>

Title and Subtitle Classes

Bulma provides .title and .subtitleclasses for consistent heading styles.

Title Sizes

<p class="title is-1">Title 1</p>
<p class="title is-2">Title 2</p>
<p class="title is-3">Title 3</p>
<p class="title is-4">Title 4</p>
<p class="title is-5">Title 5</p>
<p class="title is-6">Title 6</p>

Subtitle Sizes

<p class="subtitle is-1">Subtitle 1</p>
<p class="subtitle is-2">Subtitle 2</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="subtitle is-5">Subtitle 5</p>
<p class="subtitle is-6">Subtitle 6</p>

Title and Subtitle Combinations

<!-- Regular combination -->
<p class="title">Main Title</p>
<p class="subtitle">Supporting subtitle text</p>

<!-- With spacing -->
<p class="title is-spaced">Title with more space below</p>
<p class="subtitle">Subtitle text</p>

<!-- Centered -->
<div class="has-text-centered">
  <p class="title">Centered Title</p>
  <p class="subtitle">Centered Subtitle</p>
</div>

Content Class

The .content class provides sensible defaults for text content with proper spacing and typographic hierarchy.

<div class="content">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus.</p>
  
  <h2>Second level</h2>
  <p>Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
  
  <h3>Third level</h3>
  <p>Quisque ante lacus, malesuada ac auctor vitae, congue non ante.</p>
  
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>
  
  <ol>
    <li>First numbered item</li>
    <li>Second numbered item</li>
    <li>Third numbered item</li>
  </ol>
  
  <blockquote>This is a blockquote. Ut vulputate semper dui.</blockquote>
  
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Text Size Helpers

Bulma provides text size helper classes for consistent font sizing.

Fixed Text Sizes

<p class="is-size-1">Size 1</p>
<p class="is-size-2">Size 2</p>
<p class="is-size-3">Size 3</p>
<p class="is-size-4">Size 4</p>
<p class="is-size-5">Size 5</p>
<p class="is-size-6">Size 6</p>
<p class="is-size-7">Size 7</p>

Responsive Text Sizes

<p class="is-size-1-mobile">Size 1 on mobile</p>
<p class="is-size-2-tablet">Size 2 on tablet</p>
<p class="is-size-3-desktop">Size 3 on desktop</p>
<p class="is-size-4-widescreen">Size 4 on widescreen</p>
<p class="is-size-5-fullhd">Size 5 on full HD</p>

<!-- Combined responsive sizing -->
<p class="is-size-4-mobile is-size-2-tablet is-size-1-desktop">
  Responsive text size
</p>

Text Alignment

Control text alignment with helper classes.

Basic Alignment

<p class="has-text-left">Left aligned text</p>
<p class="has-text-centered">Centered text</p>
<p class="has-text-right">Right aligned text</p>
<p class="has-text-justified">Justified text</p>

Responsive Alignment

<p class="has-text-left-mobile">Left on mobile</p>
<p class="has-text-centered-tablet">Centered on tablet</p>
<p class="has-text-right-desktop">Right on desktop</p>
<p class="has-text-justified-widescreen">Justified on widescreen</p>

<!-- Combined responsive alignment -->
<p class="has-text-left-mobile has-text-centered-tablet has-text-right-desktop">
  Responsive text alignment
</p>

Text Transformation

Transform text case and style with helper classes.

<p class="is-capitalized">Capitalized text</p>
<p class="is-lowercase">Lowercase text</p>
<p class="is-uppercase">Uppercase text</p>
<p class="is-italic">Italic text</p>

<!-- Text weight -->
<p class="has-text-weight-light">Light weight text</p>
<p class="has-text-weight-normal">Normal weight text</p>
<p class="has-text-weight-medium">Medium weight text</p>
<p class="has-text-weight-semibold">Semibold weight text</p>
<p class="has-text-weight-bold">Bold weight text</p>

Font Family

Bulma provides font family helper classes for consistent typography.

<p class="is-family-primary">Primary font family</p>
<p class="is-family-secondary">Secondary font family</p>
<p class="is-family-sans-serif">Sans-serif font family</p>
<p class="is-family-monospace">Monospace font family</p>
<p class="is-family-code">Code font family</p>

Lists

Bulma provides styled lists with proper spacing and indentation.

Unordered Lists

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item
    <ul>
      <li>Nested item</li>
      <li>Another nested item</li>
    </ul>
  </li>
</ul>

Ordered Lists

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item
    <ol>
      <li>Nested item</li>
      <li>Another nested item</li>
    </ol>
  </li>
</ol>

Definition Lists

<dl>
  <dt>Web</dt>
  <dd>The part of the Internet that contains websites and web pages</dd>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages</dd>
  <dt>CSS</dt>
  <dd>A technology to make HTML look better</dd>
</dl>

Code and Preformatted Text

Bulma provides styles for code blocks and preformatted text.

Inline Code

<p>You can use the <code>&lt;code&gt;</code> tag for inline code.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

Code Blocks

<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Hello World&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Hello World!&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

Blockquotes

Style blockquotes with proper indentation and typography.

<blockquote>
  <p>This is a blockquote. It's used to highlight important content.</p>
  <cite>– Author Name</cite>
</blockquote>

<!-- With content class -->
<div class="content">
  <blockquote>
    <p>When used inside .content, blockquotes get additional styling.</p>
    <cite>– Another Author</cite>
  </blockquote>
</div>

Customizing Typography

You can customize Bulma's typography system using Sass variables.

Font Family Customization

// Import Bulma utilities
@import "bulma/sass/utilities/initial-variables";

// Custom font families
$family-primary: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$family-secondary: "Georgia", "Times New Roman", serif;
$family-code: "Fira Code", "Consolas", "Monaco", monospace;

// Import the rest of Bulma
@import "bulma";

Font Size Customization

// Custom font sizes
$size-1: 3rem;    // h1
$size-2: 2.5rem;  // h2
$size-3: 2rem;    // h3
$size-4: 1.5rem;  // h4
$size-5: 1.25rem; // h5
$size-6: 1rem;    // h6
$size-7: 0.75rem; // small

// Custom responsive sizes
$size-small: $size-7;
$size-normal: $size-6;
$size-medium: $size-5;
$size-large: $size-4;

Font Weight Customization

// Custom font weights
$weight-light: 300;
$weight-normal: 400;
$weight-medium: 500;
$weight-semibold: 600;
$weight-bold: 700;
$weight-extrabold: 800;

// Apply to elements
$title-weight: $weight-bold;
$subtitle-weight: $weight-normal;
$body-weight: $weight-normal;

Responsive Typography

Create responsive typography that adapts to different screen sizes.

Viewport Units for Responsive Text

<!-- Using viewport units -->
<p style="font-size: 4vw;">Responsive viewport text</p>

<!-- With CSS custom properties -->
<style>
  :root {
    --text-scale: 1;
  }
  
  .responsive-text {
    font-size: calc(1rem * var(--text-scale));
  }
  
  @media (min-width: 768px) {
    :root {
      --text-scale: 1.2;
    }
  }
</style>

<p class="responsive-text">Scalable responsive text</p>

Fluid Typography

/* Fluid typography with CSS clamp */
.fluid-heading {
  font-size: clamp(2rem, 5vw, 4rem);
}

.fluid-text {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

<h1 class="fluid-heading">Fluid Heading</h1>
<p class="fluid-text">Fluid paragraph text that scales smoothly.</p>

Best Practices

1. Hierarchy and Contrast

• Maintain clear visual hierarchy with heading sizes
• Ensure sufficient contrast between text and background
• Use font weights to create emphasis without changing size

2. Readability

• Limit line length to 50-75 characters for optimal reading
• Use appropriate line height (1.4-1.6 for body text)
• Choose legible font sizes (16px minimum for body text)

3. Performance

• Use system fonts when possible for faster loading
• Limit custom font families to 2-3 per project
• Use font-display: swap for web fonts

4. Accessibility

• Use semantic HTML elements (h1-h6, p, strong, em)
• Ensure text can be resized to 200% without breaking layout
• Provide sufficient color contrast (4.5:1 for normal text)

Advanced Typography Features

Text Shadows

/* Custom text shadow classes */
.has-text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.has-text-shadow-light {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

<h1 class="has-text-shadow">Text with Shadow</h1>
<p class="has-text-shadow-light">Subtle text shadow</p>

Text Gradients

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

<h1 class="gradient-text">Gradient Text</h1>

Letter Spacing and Line Height

/* Custom letter spacing */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }

/* Custom line height */
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-loose { line-height: 2; }

<p class="tracking-wide leading-loose">Wide tracking with loose leading</p>

Up next: Bulma Spacing System