Latest Bulletin
 

Typography


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


This is a Primary Headline (h1)

Nunc ut nisi sed diam viverra porttitor. Donec in urna nunc, eget vestibulum risus. Duis a rutrum ligula. Nulla laoreet mollis tellus, et malesuada magna congue id. Nullam elementum, erat id eleifend posuere, sapien velit tincidunt massa, sed venenatis magna orci non erat. Vivamus gravida nunc vitae ipsum volutpat lobortis. Sed lacus massa, commodo in laoreet a, posuere tristique mi. Donec lacinia tincidunt purus ac hendrerit. In sodales enim eu enim scelerisque lobortis. Integer vehicula mi at nisl consequat et hendrerit mauris iaculis.

This is a Secondary Headline! (h2)

In cursus vestibulum nunc, eget viverra nibh sodales ultrices. Proin at diam interdum neque placerat suscipit. Sed egestas consectetur magna vitae rutrum. Aenean tincidunt pharetra leo. Curabitur euismod sollicitudin elit. Donec faucibus lacus nec sapien. Aliquam ipsum nisi, scelerisque et, commodo nec, consectetur vel, tellus.

Here’s Another One (h3)

Donec commodo aliquet purus, ut sodales eros iaculis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere, ligula accumsan dapibus pretium, nulla justo imperdiet enim, at facilisis lacus orci at lectus. Suspendisse potenti. Sed justo augue, commodo vitae dapibus sit amet, faucibus vel magna.

Whoa! Ultra Readable Text (h4)

Sed justo augue, commodo vitae dapibus sit amet, faucibus vel magna. Cras posuere, ligula accumsan dapibus pretium, nulla justo imperdiet enim, at facilisis lacus orci at lectus. Suspendisse potenti.

They Do Exist (h5)

Suspendisse potenti. Sed justo augue, commodo vitae dapibus sit amet, faucibus vel magna.

For Those Who Like The Details (h6)

Cras posuere, ligula accumsan dapibus pretium, nulla justo imperdiet enim, at facilisis lacus orci at lectus. Suspendisse potenti. Sed justo augue, commodo vitae dapibus sit amet, faucibus vel magna.

 

Strong Header (h1)

Strong Header (h2)

Strong Header (h3)

Strong Header (h4)

Strong Header (h5)
Strong Header (h5)

 

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.
logo