Blueprint by Field Office

Typography

A comprehensive type system designed for digital products, with a focus on readability and visual hierarchy.

Font Size Scale

Style name
Font size
Line height
Font weight
Class
H0
7xl (mobile) / 9xl (desktop)
none
Normal
Hero Display Text
H1
3.5rem (mobile) / 7xl (desktop)
0.9
Normal
Build beautiful interfaces with confidence
H2
5xl (mobile) / 3.5rem (desktop)
none
Normal
Getting started with our design system
H3
4xl (mobile) / 5xl (desktop)
none
Normal
Core principles of visual hierarchy
H4
2xl (mobile) / 3xl (desktop)
tight
Normal
Understanding typography in interfaces
H5
xl (mobile) / 2xl (desktop)
tight
Normal
Best practices for readable content
H6
lg (mobile) / xl (desktop)
tight
Normal
Implementing responsive typography

Body Text

Style name
Font size
Line height
Font weight
Class
Body Large
1.25rem
1.6
Normal
Our design system helps teams build high-quality digital experiences. With consistent components and clear guidelines, you can focus on solving user problems instead of reinventing the wheel.
Body
1rem
1.6
Normal
Typography plays a crucial role in creating clear hierarchies, organizing content, and guiding users through an interface. Good typography makes the act of reading effortless, while poor typography turns users away.
Body Small
0.875rem
1.5
Normal
Use smaller text for supporting content, such as metadata, captions, or secondary information. This size maintains readability while creating clear visual hierarchy.
Body XSmall
0.75rem
1.5
Normal
Reserved for legal text, credits, and other fine print where space is limited but the information must still be accessible.
text-overline
sm
normal
Mono
SECTION LABEL OR CAPTION TEXT

HTML Elements

Lists

Unordered List

  • Clean and Blueprint design patterns
  • Responsive components
    • Mobile-first approach
    • Adaptive layouts
  • Accessibility best practices
  • Dark mode support

Ordered List

  1. Install dependencies
  2. Configure your project
    1. Set up environment
    2. Import required modules
  3. Start development
  4. Deploy your application

Blockquote

Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible.

— Don Norman, The Design of Everyday Things

Table

ComponentCategoryStatusVersion
ButtonCoreStable1.0.0
InputFormBeta0.9.0
CardLayoutStable1.2.0
ModalOverlayBeta0.8.5

Usage Examples

Lists

<ul>
  <li>First item</li>
  <li>Second item
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

Blockquote

<blockquote>
  <p>Quote text goes here</p>
  <cite>— Author Name</cite>
</blockquote>

Table

<table>
  <thead>
    <tr>
      <th>Header</th>
      <th align="center">Centered</th>
      <th align="right">Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td align="center">Centered</td>
      <td align="right">Right</td>
    </tr>
  </tbody>
</table>

Usage

Headings

Use heading classes either directly on heading elements or with the class names. All heading styles are responsive and will automatically adjust at the lg breakpoint:

<!-- Using semantic HTML -->
<h1>Build beautiful interfaces</h1>
<h2>Core features</h2>

<!-- Using classes -->
<div class="h1">Build beautiful interfaces</div>
<div class="h2">Core features</div>

<!-- All heading components use mobile-first responsive design -->
<!-- For example, h1 is defined as: -->
<!-- @apply lg:text-7xl text-[3.5rem] leading-[0.9] font-sans; -->

Body Text

Apply body text classes to any text element:

<p class="text-body-large">Main feature description</p>
<p class="text-body">Detailed explanation of features</p>
<p class="text-body-small">Additional information</p>
<span class="text-body-xsmall">Copyright notice</span>
<span class="text-overline p-6">SECTION LABEL</span>

<!-- The small tag is automatically styled as overline text -->
<small>CAPTION TEXT</small>

Responsive Behavior

Blueprint's typography system is designed to be responsive by default. Font sizes adjust automatically based on viewport size, ensuring optimal readability across devices.

The typography system uses container queries for component-level responsiveness, allowing text to adapt based on its container size rather than just the viewport size.

Customizing & Exporting Typography

Blueprint UI Library allows you to customize and export typography variables through the Theme Customizer.

Available Export Options

  • Typography Only - Export just your customized typography settings
  • Colors Only - Export just your customized color variables
  • All Theme Variables - Export both typography and colors together

How to Export Typography

  1. Open the Theme Customizer by clicking the theme icon in the navigation
  2. Navigate to the Typography tab
  3. Customize your typography settings as needed
  4. Click the "Export" dropdown button
  5. Select "Export Typography Only" from the dropdown menu
  6. The typography.css file will be downloaded to your device

The exported CSS file contains all your customized typography variables in CSS variable format, ready to be used in any web project.

Typography Variables Structure

Typography variables are organized into logical groups:

  • Headings - Variables for h0 through h6 heading styles
  • Body Text - Variables for body text in different sizes (large, default, small, xs)
  • Font Weights - Variables for different font weight values
  • Overline - Variables for overline text styling
  • Other Typography - Additional typography-related variables