Skip to content

Typography

A comprehensive showcase of all typography-related HTML elements organized by category.

Structural Elements

Block-level elements that shape content flow and hierarchy.

Headings <h1-6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph <p>

This is a paragraph element. It represents a block of text and is one of the most commonly used HTML elements. Paragraphs automatically add spacing before and after themselves to improve readability.

Multiple paragraphs are visually separated to create clear content boundaries and improve the reading experience.

Lists <ul>, <ol>, <li>

Unordered List

  • First item
  • Second item
  • Third item
    • Nested item
    • Another nested item

Ordered List

  1. First step
  2. Second step
  3. Third step
    1. Sub-step A
    2. Sub-step B

Definition List <dl>, <dt>, <dd>

HTML
HyperText Markup Language - the standard markup language for web pages.
CSS
Cascading Style Sheets - used to describe the presentation of HTML documents.
JavaScript
A programming language that enables interactive web pages and dynamic content.

Inline Elements

Elements for emphasis and formatting within text.

Emphasis & Importance

<em> - Emphasized text (semantic emphasis, typically italic)

<strong> - Strong importance (semantic strong, typically bold)

<i> - Idiomatic text (alternative voice or mood, typically italic)

<b> - Bold text (stylistic offset, no semantic importance)

Text Modifications

<small> - Smaller text (fine print, side comments)

E = mc2 - <sup> Superscript text

H2O - <sub> Subscript text

<ins> - Inserted text (underlined by default)

<del> - Deleted text (strikethrough by default)

<mark> - Highlighted/marked text

Abbreviations

The W3C is the main international standards organization for the WWW. Hover over abbreviations to see their full meaning.

<abbr title="Full Text">SHORT</abbr>

Specialized Elements

Elements for quotes, code, and metadata.

Quotations

<blockquote> - Block Quotation

The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.
— Steve Jobs

<q> - Inline Quotation

As Benjamin Franklin once said, Tell me and I forget. Teach me and I remember. Involve me and I learn.

<cite> - Citation

More information can be found in The Design of Everyday Things by Don Norman.

Code & Computer Text

<code> - Inline Code

Use the console.log() function to debug your JavaScript.

<pre> - Preformatted Text

function greet(name) { 
  return `Hello, $${name}!`;
}

console.log(greet('World'));

<kbd> - Keyboard Input

Press Ctrl + C to copy.

<samp> - Sample Output

The program returned: Error 404: File not found

Metadata Elements

<address> - Contact Information

Adrian's Viewpoint
Email: contact@example.com
Website: adrianviewpoint.com

<time> - Date/Time

Article published on

Meeting scheduled for

Real-World Example

A practical example combining multiple typography elements.

Understanding Web Typography

Typography is fundamental to good web design. As the W3C states in their guidelines, proper use of semantic HTML elements improves both accessibility and search engine optimization.

Good typography makes the act of reading effortless, while poor typography turns users away.

Key Principles

  1. Use semantic HTML elements
  2. Maintain proper heading hierarchy
  3. Ensure sufficient contrast

For example, use <strong> for important text and <em> for emphasized text.

Last updated: