Typography Test Sheet


golden-ratio-web-typography

The REM is one of the newest font-size standards for CSS3. It stands for “Root EM”. You base your calculation on the default font-size of the HTML element – NOT the parent like EM. It’s basically “EM v2.0″.

The problem with Pixels are, they absolutely do-not-scale in Internet Explorer. Furthermore, with the onset of Responsive Web Design, having fonts that scale (in relation to the screen width) has become paramount. Percentages (%) and EM’s are better, but they’re tricky and compound. Still not an answer.

A real solution? Use the REM. (Source – Greg Rickaby)

 

Line-Height & Standard Paragraphs

Ut non metus orci. Mauris id mi libero. Morbi vehicula tincidunt est sit amet eleifend. Etiam egestas iaculis metus eu suscipit. Mauris placerat velit vitae lacus hendrerit, in pharetra leo volutpat. Nulla tincidunt hendrerit faucibus. Praesent lectus odio, iaculis et tincidunt non, condimentum a massa. Nulla facilisi.

Nullam a orci vitae augue malesuada semper sit amet eu sapien. Maecenas magna nunc, placerat a mattis et, tincidunt non elit. Duis at massa porttitor, dignissim odio vel, sollicitudin sem. Donec imperdiet mauris vitae placerat facilisis. Fusce id rutrum felis. Proin dignissim mattis velit a pharetra. Vivamus mattis, mauris eget vulputate iaculis, nisl ipsum viverra turpis, sed blandit arcu erat eget elit. Nunc et urna vitae nunc pellentesque bibendum vitae eu lectus. Quisque cursus leo vitae libero vulputate, venenatis sodales lorem porta. Vivamus vestibulum tellus et massa mollis adipiscing. Morbi a justo urna. Donec pharetra tortor sed sapien lobortis viverra.

 

Standard Headlines & Bold Headlines

Header 1

Header 2

Header 3

Header 4

Header 5

Strong Header 1

Strong Header 2

Strong Header 3

Strong Header 4

Strong Header 5

 

Ordered List

  1. Quisque cursus leo.
  2. Vitae libero vulputate.
  3. Venenatis sodales lorem porta.
    1. Vivamus vestibulum tellus.
    2. E massa mollis adipiscing.
    3. Morbi a justo urna.
  4. Donec pharetra tortor.
  5. Sed sapien lobortis viverra.

 

Unordered List

  • Quisque cursus leo.
  • Vitae libero vulputate.
  • Venenatis sodales lorem porta.
    • Vivamus vestibulum tellus.
    • E massa mollis adipiscing.
    • Morbi a justo urna.
  • Donec pharetra tortor.
  • Sed sapien lobortis viverra.

 

BlockQuotes, Bold, Italics

Fusce gravida a arcu id scelerisque. Mauris auctor ultricies lacus at commodo. Nullam cursus sodales tincidunt. Sed vitae tincidunt lorem. Integer sed est eu justo lacinia lobortis. Phasellus imperdiet placerat dui at posuere. Sed mattis lobortis turpis, et lacinia ante sollicitudin a. Nulla ut congue felis.

Fusce eleifend placerat augue, quis consectetur ipsum interdum non. Mauris at mauris ut lorem faucibus porttitor ut vitae libero. In id pellentesque orci, et fringilla nisl. Cras vel dapibus magna. Vestibulum interdum, ligula at egestas cursus, dolor est ornare felis, a pulvinar velit eros id quam. Mauris lacus tortor, luctus vitae faucibus et, cursus at erat. Vivamus vitae egestas metus, sed egestas velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies tortor nec velit auctor, vel condimentum odio tempus. Nulla congue dignissim justo vel pharetra. Donec libero velit, tempor sed mi et, volutpat rhoncus mi. Vestibulum bibendum sem sit amet tortor mattis, a varius dolor fermentum. Morbi porttitor lorem velit, sit amet adipiscing risus sollicitudin a. Donec auctor tempus congue. Morbi mollis tristique porttitor. Etiam congue laoreet lobortis.

 

Paragraph Alignment

LEFT: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies tortor nec velit auctor, vel condimentum odio tempus. Nulla congue dignissim justo vel pharetra. Donec libero velit, tempor sed mi et, volutpat rhoncus mi. Vestibulum bibendum sem sit amet tortor mattis, a varius dolor fermentum. Morbi porttitor lorem velit, sit amet adipiscing risus sollicitudin a. Donec auctor tempus congue. Morbi mollis tristique porttitor. Etiam congue laoreet lobortis.

RIGHT: Ut non metus orci. Mauris id mi libero. Morbi vehicula tincidunt est sit amet eleifend. Etiam egestas iaculis metus eu suscipit. Mauris placerat velit vitae lacus hendrerit, in pharetra leo volutpat. Nulla tincidunt hendrerit faucibus. Praesent lectus odio, iaculis et tincidunt non, condimentum a massa. Nulla facilisi.

CENTER: Nullam a orci vitae augue malesuada semper sit amet eu sapien. Maecenas magna nunc, placerat a mattis et, tincidunt non elit. Duis at massa porttitor, dignissim odio vel, sollicitudin sem. Donec imperdiet mauris vitae placerat facilisis. Fusce id rutrum felis. Proin dignissim mattis velit a pharetra. Vivamus mattis, mauris eget vulputate iaculis, nisl ipsum viverra turpis, sed blandit arcu erat eget elit. Nunc et urna vitae nunc pellentesque bibendum vitae eu lectus. Quisque cursus leo vitae libero vulputate, venenatis sodales lorem porta. Vivamus vestibulum tellus et massa mollis adipiscing. Morbi a justo urna. Donec pharetra tortor sed sapien lobortis viverra.

FULL JUSTIFY: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies tortor nec velit auctor, vel condimentum odio tempus. Nulla congue dignissim justo vel pharetra. Donec libero velit, tempor sed mi et, volutpat rhoncus mi. Vestibulum bibendum sem sit amet tortor mattis, a varius dolor fermentum. Morbi porttitor lorem velit, sit amet adipiscing risus sollicitudin a. Donec auctor tempus congue. Morbi mollis tristique porttitor. Etiam congue laoreet lobortis.

Image Alignment

Wine bar waiter clean glass in restaurantLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies tortor nec velit auctor, vel condimentum odio tempus. Nulla congue dignissim justo vel pharetra. Donec libero velit, tempor sed mi et, volutpat rhoncus mi. Vestibulum bibendum sem sit amet tortor mattis, a varius dolor fermentum. Morbi porttitor lorem velit, sit amet adipiscing risus sollicitudin a. Donec auctor tempus congue. Morbi mollis tristique porttitor. Etiam congue laoreet lobortis.

Ut non metus orci. Mauris id mi libero. Morbi vehicula tincidunt est sit amet eleifend. Etiam egestas iaculis metus eu suscipit. Mauris placerat velit vitae lacus hendrerit, in pharetra leo volutpat. Nulla tincidunt hendrerit faucibus. Praesent lectus odio, iaculis et tincidunt non, condimentum a massa. Nulla facilisi.

Nullam a orci vitae augue malesuada semper sit amet eu sapien. Maecenas magna nunc, placerat a mattis et, tincidunt non elit. Duis at massa porttitor, dignissim odio vel, sollicitudin sem. Donec imperdiet mauris vitae placerat facilisis. Fusce id rutrum felis. Proin dignissim mattis velit a pharetra. Vivamus mattis, mauris eget vulputate iaculis, nisl ipsum viverra turpis, sed blandit arcu erat eget elit. Nunc et urna vitae nunc pellentesque bibendum vitae eu lectus. Quisque cursus leo vitae libero vulputate, venenatis sodales lorem porta. Vivamus vestibulum tellus et massa mollis adipiscing. Morbi a justo urna. Donec pharetra tortor sed sapien lobortis viverra.

Wine

Fusce gravida a arcu id scelerisque. Mauris auctor ultricies lacus at commodo. Nullam cursus sodales tincidunt. Sed vitae tincidunt lorem. Integer sed est eu justo lacinia lobortis. Phasellus imperdiet placerat dui at posuere. Sed mattis lobortis turpis, et lacinia ante sollicitudin a. Nulla ut congue felis.

Fusce eleifend placerat augue, quis consectetur ipsum interdum non. Mauris at mauris ut lorem faucibus porttitor ut vitae libero. In id pellentesque orci, et fringilla nisl. Cras vel dapibus magna. Vestibulum interdum, ligula at egestas cursus, dolor est ornare felis, a pulvinar velit eros id quam. Mauris lacus tortor, luctus vitae faucibus et, cursus at erat. Vivamus vitae egestas metus, sed egestas velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies tortor nec velit auctor, vel condimentum odio tempus. Nulla congue dignissim justo vel pharetra. Donec libero velit, tempor sed mi et, volutpat rhoncus mi. Vestibulum bibendum sem sit amet tortor mattis, a varius dolor fermentum. Morbi porttitor lorem velit, sit amet adipiscing risus sollicitudin a. Donec auctor tempus congue. Morbi mollis tristique porttitor. Etiam congue laoreet lobortis.

 

Barntender Making a Cocktail Drink

Fusce gravida a arcu id scelerisque. Mauris auctor ultricies lacus at commodo. Nullam cursus sodales tincidunt. Sed vitae tincidunt lorem. Integer sed est eu justo lacinia lobortis. Phasellus imperdiet placerat dui at posuere. Sed mattis lobortis turpis, et lacinia ante sollicitudin a. Nulla ut congue felis.

 

Code & Pre-Formatted Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies tortor nec velit auctor, vel condimentum odio tempus. Nulla congue dignissim justo vel pharetra. Donec libero velit, tempor sed mi et, volutpat rhoncus mi. Vestibulum bibendum sem sit amet tortor mattis, a varius dolor fermentum. Morbi porttitor lorem velit, sit amet adipiscing risus sollicitudin a. Donec auctor tempus congue. Morbi mollis tristique porttitor. Etiam congue laoreet lobortis.