Elements of typography

Example of headings, paragraphs, lists and basic typography element sizes and weights.

Heading level 2

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Heading level 3

It was going to rain. The weather forecast didn’t say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare.

Heading level 4

It was a question of which of the two she preferred. On the one hand, the choice seemed simple. The more expensive one with a brand name would be the choice of most. It was the easy choice. The safe choice. But she wasn’t sure she actually preferred it.

Heading level 5

She had come to the conclusion that you could tell a lot about a person by their ears. The way they stuck out and the size of the earlobes could give you wonderful insights into the person. Of course, she couldn’t scientifically prove any of this, but that didn’t matter to her. Before anything else, she would size up the ears of the person she was talking to.

Heading level 6

It was a rat’s nest. Not a literal one, but that is what her hair seemed to resemble every morning when she got up. It was going to take at least an hour to get it under control and she was sick and tired of it. She peered into the mirror and wondered if it was worth it. It wasn’t. She opened the drawer and picked up the hair clippers.

Paragraphs

Lede paragraph

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Normal paragraph

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Secondary paragraph

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Tertiary paragraph

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn’t hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Quotations

Blockquote

She counted. One. She could hear the steps coming closer. Two. Puffs of breath could be seen coming from his mouth. Three. He stopped beside her. Four. She pulled the trigger of the gun.

Source or author

Blockquote with open quote

It was going to rain. The weather forecast didn’t say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare.

Source or author

Blockquote aligned right

It was going to rain. The weather forecast didn’t say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare.

Source or author

Blockquote aligned right with close quote

It was going to rain. The weather forecast didn’t say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare.

Source or author

Lists

Type of lists

  • None
  • Disc
  • Circle
  • Square
  • Decimal
  • Decimal leading zero
  • Upper roman
  • Lower greek
  • Lower alpha
  • Upper alpha
  • Armenian
  • Georgian

Unordered list

  • unordered item
  • unordered item
  • unordered item
  • unordered item

Ordered list

  1. ordered item
  2. ordered item
  3. ordered item
  4. ordered item

Nested lists

  • unordered item
  • unordered item
    1. ordered item
    2. ordered item
    3. ordered item
      • unordered item
      • unordered item
    4. ordered item
  • unordered item

Definition list

GCBHR Visual Pattern Library
The Geneva Center for Business and Human Rights (GCBHR) challenges and empowers current and future business leaders to develop business models that enable profits and principles to coexist.

Text level elements

Text level HTML elements may be used within other elements. They include: em and strong for semantic emphasis, i and b for presentational formatting, abbr abbreviations, cite citations, code example, del, ins for visibly deleted and inserted content, dfn definitions, mark for highlighted passages and sup superscript and sub subscript.