Typography

Font-family: Libre Franklin

h1 Libre Franklin

h2 Libre Franklin

h3 Libre Franklin

h4 Libre Franklin 

h5 Libre Franklin
h6 Libre Franklin

Paragraph text

Italicized text

Boldfaced text

Lists

Unordered list

  • Brass
    • Trombone
    • Trumpet
      • Flugelhorn
      • Cornet
  • Woodwind
    • English Horn
    • Contrabassoon
  • Keyboard
    • Harmonium
    • Mellotron

Ordered list

  1. Brass
    1. Trombone
    2. Trumpet
      1. Flugelhorn
      2. Cornet
  2. Woodwind
    1. English Horn
    2. Contrabassoon
  3. Keyboard
    1. Harmonium
    2. Mellotron

with "ut-headline--underline" utility class

h1 Libre Franklin

h2 Libre Franklin

h3 Libre Franklin

h4 Libre Franklin

h5 Libre Franklin
h6 Libre Franklin

Links

Standard hyperlink

With external link icon

With lock icon

With right-facing caret icon

Less common typographical elements

Most examples excerpted from W3Schools.

HTML ElementExample Usage
The <blockquote> tag specifies a section that is quoted from another source.

When you have eliminated the impossible, whatever remains, however improbable, must be the truth.

-- Sherlock Holmes

The <em> tag is used to define emphasized text. The content inside is typically displayed in italic.When you have eliminated the impossible, whatever remains, however improbable, must be the truth.
The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. Use the <i> element only when there is not a more appropriate semantic element, such as <em> (emphasized text)The RMS Titanic, a luxury steamship, sank on April 15, 1912 after striking an iceberg.
The <dfn> tag stands for the "definition element", and it specifies a term that is going to be defined within the content.HTML is the standard markup language for creating web pages.
The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).The Scream by Edward Munch. Painted in 1893.
The <address> tag defines the contact information for the author/owner of a document or an article.

Sherlock Holmes
221B Baker Street
London, England

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks.
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
The <code> tag is used to define a piece of computer code.The HTML button tag defines a clickable button.
The <kbd> tag is used to define keyboard input.Press Cmd + C to copy text (Mac OS).
The <var> tag is used to defines a variable in programming or in a mathematical expression.The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.
The <abbr> tag defines an abbreviation or an acronym.The WHO was founded in 1948.
The <mark> tag defines text that should be marked or highlighted.When you have eliminated the impossible, whatever remains, however improbable, must be the truth.
The <del> tag defines text that has been removed. The <ins> tag defines text that has been inserted.When you have eliminated the possible impossible, whatever remains, however improbable, must be the truth.
The <sup> tag defines superscript text.Superscript text can be used for footnotes1.
The <sub> tag defines subscript text.Subscript text can be used for chemical formulas, like H2O.
The <hr> tag defines a thematic break in a section.

When you have eliminated the impossible, whatever remains, however improbable, must be the truth.

When you have eliminated the impossible, whatever remains, however improbable, must be the truth.