skip to main content

Base Typography

Bare, unstyled HTML elements. No classes.

Grouping Elements §

Headings & Paragraphs §

Heading 1 h1

Paragraph p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis suscipit nunc, a cursus libero euismod at. Nulla placerat neque massa, quis interdum leo efficitur vel. Donec feugiat varius arcu non volutpat. Mauris eget mauris ut mauris auctor mattis id vel justo. Nulla dictum arcu nec suscipit mollis. Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.

Heading 2 h2

Paragraph p Suspendisse ut auctor enim. Aliquam viverra enim vitae ante aliquet venenatis. Sed vel nibh sit amet sapien fermentum mattis nec non arcu. Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis. Aenean tincidunt ante risus, semper malesuada libero consectetur id. Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi. Integer blandit est quam, eget mattis urna scelerisque quis. Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula. Maecenas risus nibh, volutpat sed euismod non, semper eget neque. Integer varius egestas risus, volutpat sagittis turpis convallis eget. Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet. In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem. Sed luctus congue tortor a scelerisque.

Heading 3 h3

Paragraph p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis. Quisque id justo elit. Fusce ut quam non sem efficitur accumsan sed id neque. Mauris finibus dignissim gravida. In dignissim mauris ac odio molestie volutpat. Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus. Suspendisse sit amet fermentum sapien. Aliquam luctus laoreet iaculis. Proin lacinia orci vitae tellus pellentesque porttitor.

Heading 4 h4

Paragraph p Aenean consectetur suscipit urna, non vehicula lacus blandit et. Integer at lacus et diam tristique suscipit. Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis. Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat. Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo. Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi. Curabitur aliquam maximus nulla eu venenatis. Nam aliquam lorem non felis dignissim dictum. Pellentesque sagittis vehicula nisl non luctus. Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem. In quis lectus in lectus interdum laoreet eu quis quam. Fusce auctor posuere purus, quis semper libero dignissim euismod. Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.

Heading 5 h5

Paragraph p Donec finibus ut lectus finibus pellentesque. Nulla euismod feugiat nulla nec posuere. Sed ac est id sem sagittis rhoncus eu ac neque. Aliquam eu metus sagittis, porta turpis id, scelerisque magna. Nulla venenatis elementum est, semper viverra felis tristique sit amet. Mauris nec ipsum id orci porttitor auctor sed sit amet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.

Heading 6 h6

Paragraph p Donec vel dolor ut felis dapibus ultricies vitae a nibh. Ut semper odio est, sed lacinia ligula gravida ut. Vestibulum facilisis viverra pulvinar. Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie. Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus. Donec ut quam massa. Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl. Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zero h1 Two Three
Four Five Six Seven

Zero One h2 Three
Four Five Six Seven

Zero One Two h3
Four Five Six Seven

Zero One Two Three
h4 Five Six Seven

Zero One Two Three
Four h5 Six Seven
Zero One Two Three
Four Five h6 Seven
12345 address Ave br
Washington, DC 00000 br
United States of America
              Pellentesque pre habitant() {
                morbi.tristique = senectus;
                et (netus = malesuada; fames < ac; turpis.egestas++) {
                  Nunc.sit += [amet, scelerisque][et];
                  Cras = {
                    lectus: cursus
                  , sed: dui
                  , quis: convallis(id () { justo Quisque.elit; })
                  };
                }
              }
            
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists §

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
figcaption Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables §

table caption
header row 1: heading 1 heading 2 heading 3
footer row 1: data 1 data 2 data 3
footer row 2: data 1 data 2 data 3
body row 1: data 1 data 2 data 3
body row 2: data 1 data 2 data 3
body row 3: data 1 data 2 data 3

Transparent Elements §

A transparent element can be either block-level or text-level, depending on its contents.

Transparent elements styled with inline display:
Transparent elements styled with block display:

Text-Level Elements §

Stress §

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation §

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data §

  • a placeholder for dynamic data slot
  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Forms §

Integer at lacus et diam tristique fieldset legend suscipit. Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Embedded Elements §

Interactive Elements §

Integer at lacus et diam tristique details summary suscipit. Aenean consectetur details suscipit urna, non vehicula lacus blandit et.

A Dialog

text for dialog element

Can include flow content.

jump to top