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
- ordered item
- ordered item
- ordered item
- ordered item
Nested lists
- unordered item
- unordered item
- ordered item
- ordered item
- ordered item
- unordered item
- unordered item
- 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.