Using typography styles

Various built-in and custom article content styles can be applied using the Zendesk Guide article editor.

In this article

Headings

Use .h1 through .h6 classes when you want to match the font styling of a heading but cannot use the associated HTML element.

<p class="h1 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h2 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h3 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h4 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h5 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h6 truncate ...">The quick brown fox jumped over the lazy dog.</p>

Use font size utilities when you need to create larger (or smaller) headings.

Inline text elements

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

You can also use our text color and background color utilities to apply theme colors to some or all of a paragraph.

<p>
  This is an example of a paragraph that you might find in an article with 
  <span class="text-red-500">important information</span> highlighted using our 
  <span class="text-white bg-red-500">color utilities</span> to ensure that 
  it's not missed by visitors
</p>

Abbreviations

The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym.

Use the optional title attribute to provide an expansion or description for the abbreviation.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

There are a variety of other elements included in our themes which you can use within article content as well, including:

And much more.

Other elements

You can also easily create your own custom content styles by combining utilities. For example, a box with a light drop shadow could be used to contain a summary of an article:

<div class="py-3 px-6 border border-radius shadow-sm">
  <h3 class="mt-4">
    Summary
  </h3>
  <ol>
    <li><a href="#">Getting started</a></li>
    <li><a href="#">Creating articles</a></li>
    <li><a href="#">Styling articles</a></li>
  </ol>
</div>

The summary, in turn, could be automatically generated by our Table of Contents extension.

Questions or feedback about this article? Let us know