Typography

Typography plays a fundamental role in shaping the visual identity of our product and maintaining a consistent user experience. We prioritize accessibility, ensuring that the text, size, color and contrast we created is legible and will contribute to the overall experience of our users.

Please reference our guidance below on how and when to use the various text elements, as well as additional context on our font stack and font properties.

Fonts

Civil is the interface font for all text in Honeycomb. This includes all components, buttons, reports, and headings—there is no separate font family for titles or headings. This library includes all the necessary web fonts and licenses that you need to incorporate Civil.

Base text styles

Default interface text is set to 14px in Civil and does not have any leading or other text properties applied to it. Leading, spacing, and other properties are controlled by the semantic element and/or utility class you use.

<span class="hc-text hc-text--default">Default text</span>
<span class="hc-text hc-text--secondary">Secondary text</span>
<span class="hc-text hc-text--disabled">Disabled text</span>
<span class="hc-text hc-text--link">Link text</span>

Text hierarchy

Utility classes and class-less elements also style text, adding appropriate line heights, colors, cases, weights, and other propertyes. Use these classes in your text hierarchy as needed.

Headings

Headings 1 through 6 are available with semantic classes on the <h1> to <h6> elements. A utility class .hc-subheader will also style text that should be secondary to a label or other section header.

You can always use these heading elements without the preformatted .hc-* classes as well.

<h1 class="hc-h1">Top level heading</h1>
<h2 class="hc-h2">Second level heading</h2>
<h3 class="hc-h3">Third level heading</h3>
<h4 class="hc-h4">Fourth level heading</h4>
<h5 class="hc-h5">Fifth level heading</h5>
<h6 class="hc-h6">Sixth level heading</h6>
<span class="hc-subheader">Subheader</span>

We recommend the following use cases for these headers:

• <h1>: page titles
• <h2>: section titles or content titles within a page
• <h3>: modal titles or headings in a right drawer component
• <h4>: chart titles, table titles, or headings for larger components like these
• <h5>: card titles or other headings that should have slightly larger 16px text
• <h6>: alert titles or other content that should have the same size but different weight from body text

Paragraphs

Style text as prose using the .hc-body class on any semantic element.

<p class="hc-body">
  Did you hear that? They've shut down the <a href="#">main reactor</a>. 
  We'll be destroyed for sure. This is madness! We're doomed! There'll be 
  no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, 
  where are you? At last! Where have you been? They're heading in this direction.
</p>
<span class="hc-body">
  Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for 
  it as it is. I need your help, Luke. Ben? Ben Kenobi! Boy, am I glad to see you! 
  The Jundland wastes are not to be traveled lightly.
</span>

Add the .body--lg modifier to increase the font size of a paragraph.

<p class="hc-body hc-body--lg">
  Tell me young Luke, what brings you out this far? Oh, this little droid! 
  I think he's searching for his former master, I've never seen such devotion 
  in a droid before...there seems to be no stopping him. He claims to be the 
  property of an Obi-Wan Kenobi. 
</p>

Captions and meta text

Captions provide additional explanatory text below images, tables, charts, or other objects. Add class .hc-caption to any inline element to create caption text.

<span class="hc-caption">
  Honeycomb empowers us to build a cohesive, consistent style across <a href="#">our products</a>.
</span>

Meta text and microcopy provide additional ways of communicating assistance, metadata, or other deferred information. Add class .hc-meta to any inline element to create a slightly subdued description or detail line.

Add class .hc-micro for content that needs to be smaller than general interface text, like tiny links at the bottom of a menu or secondary details below a table value, for instance.

<span class="hc-meta">
  Last updated Mar 23, 2023 by Amanda Smith
</span>
<span class="hc-meta">
  <a href="#" class="hc-link">View history</a> for more information.
</span>
<br>
<span class="hc-micro">
  &copy; 2023 SchoolStatus, LLC
</span>
<span class="hc-micro">
  <a href="#" class="hc-link">Terms</a> &middot; <a href="#" class="hc-link">Privacy</a>
</span>

Design guidelines

• Keep the heading text short and clear.
• Follow a descending heading order.
• Use fonts bigger than 14 pixel.
• Don’t use two different sizes of text in the same line
• Keep text lines to a reasonable length (50-75 characters) to improve readability.
• Avoid excessively long lines of text.