Typhography Style

Hedding Tag Style

Light Heading H1

Light Heading H2

Light Heading H3

Light Heading H4

Light Heading H5
Light Heading H6

Bold Heading H1

Bold Heading H2

Bold Heading H3

Bold Heading H4

Bold Heading H5
Bold Heading H6

Light Heading H1

Light Heading H2

Light Heading H3

Light Heading H4

Light Heading H5
Light Heading H6

Bold Heading H1

Bold Heading H2

Bold Heading H3

Bold Heading H4

Bold Heading H5
Bold Heading H6

Most designers set their type arbitrarily, either by pulling values out of the sky or by adhering to a baseline grid. The former case isn’t worth discussing here, but the latter requires a closer look.
When using a baseline grid, the first thing you must decide on is your baseline grid unit. You’ll commonly see baseline grid values of something like 20px, but where does a value like that come from?

Most designers set their type arbitrarily, either by pulling values out of the sky or by adhering to a baseline grid. The former case isn’t worth discussing here, but the latter requires a closer look.
When using a baseline grid, the first thing you must decide on is your baseline grid unit. You’ll commonly see baseline grid values of something like 20px, but where does a value like that come from?

Text Tooltips

Most designers set their type arbitrarily, Hover over me either by pulling values out of the sky or by adhering to a baseline grid. The former case isn’t worth discussing here, but the latter requires a closer look. Hover over me When using a baseline grid, the Hover over me first thing you must decide on is your baseline grid unit. Hover over me You’ll commonly see baseline grid values of something like 20px, but where does a value like that come from?

Dropcap Style

s Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod risus ligula, id luctus lectus volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id mi sit amet nibh iaculis faucibus vitae et magna. Nulla bibendum, lectus et molestie vestibulum, tellus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed bibendum leo. Mauris mauris massa, eleifend et purus vel, feugiat rutrum nulla. Cras vitae est vel ipsum faucibus fermentum a ultricies urna. Cum sociis natoque penatibus et magnis dis parturient montes.

t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod risus ligula, id luctus lectus volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id mi sit amet nibh iaculis faucibus vitae et magna. Nulla bibendum, lectus et molestie vestibulum, tellus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed bibendum leo. Mauris mauris massa, eleifend et purus vel, feugiat rutrum nulla. Cras vitae est vel ipsum faucibus fermentum a ultricies urna. Cum sociis natoque penatibus et magnis dis parturient montes.

f Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod risus ligula, id luctus lectus volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id mi sit amet nibh iaculis faucibus vitae et magna. Nulla bibendum, lectus et molestie vestibulum, tellus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed bibendum leo. Mauris mauris massa, eleifend et purus vel, feugiat rutrum nulla. Cras vitae est vel ipsum faucibus fermentum a ultricies urna. Cum sociis natoque penatibus et magnis dis parturient montes.

r Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod risus ligula, id luctus lectus volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id mi sit amet nibh iaculis faucibus vitae et magna. Nulla bibendum, lectus et molestie vestibulum, tellus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed bibendum leo. Mauris mauris massa, eleifend et purus vel, feugiat rutrum nulla. Cras vitae est vel ipsum faucibus fermentum a ultricies urna. Cum sociis natoque penatibus et magnis dis parturient montes.

h Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod risus ligula, id luctus lectus volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id mi sit amet nibh iaculis faucibus vitae et magna. Nulla bibendum, lectus et molestie vestibulum, tellus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed bibendum leo. Mauris mauris massa, eleifend et purus vel, feugiat rutrum nulla. Cras vitae est vel ipsum faucibus fermentum a ultricies urna. Cum sociis natoque penatibus et magnis dis parturient montes.

c Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod risus ligula, id luctus lectus volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id mi sit amet nibh iaculis faucibus vitae et magna. Nulla bibendum, lectus et molestie vestibulum, tellus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed bibendum leo. Mauris mauris massa, eleifend et purus vel, feugiat rutrum nulla. Cras vitae est vel ipsum faucibus fermentum a ultricies urna. Cum sociis natoque penatibus et magnis dis parturient montes.

List Style s With Icon

  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • 1Fusce maximus metus ac odio tempor scelerisque
  • 2Nunc tincidunt augue in enim sollicitudin feugiat.
  • 3Etiam vel diam ut ligula scelerisque gravida
  • 4Donec sed varius lectus, eu pulvinar risus.
  • 5Etiam vel diam ut ligula scelerisque gravida
  • 6Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Fusce maximus metus ac odio tempor scelerisque
  • Nunc tincidunt augue in enim sollicitudin feugiat.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.
  • Etiam vel diam ut ligula scelerisque gravida
  • Donec sed varius lectus, eu pulvinar risus.

Columns Style

2 Column 170 px

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit.

2 Column 170 px

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit.

2 Column 170 px

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit.

2 Column 170 px

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit.

2 Column 170 px

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit.

2 Column 170 px

Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit.

3 columns - 270 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo.

3 columns - 270 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo.

3 columns - 270 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo.

3 columns - 270 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo.

4 columns - 370 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo.

4 columns - 370 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo.

4 columns - 370 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo.

6 columns - 570 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo. Mauris sodales feugiat lorem. Donec malesuada tincidunt dolor. Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada,

6 columns - 570 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo. Mauris sodales feugiat lorem. Donec malesuada tincidunt dolor. Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada,

12 column - 1170 px

Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo. Mauris sodales feugiat lorem. Donec malesuada tincidunt dolor. Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo. Mauris sodales feugiat lorem. Donec malesuada tincidunt dolor. Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo. Mauris sodales feugiat lorem. Donec malesuada tincidunt dolor. Vivamus bibendum pulvinar lacinia. Integer ut rhoncus ex. Praesent tincidunt tortor libero, vitae tincidunt purus dignissim id. Fusce et metus malesuada, dapibus nisi eget, molestie justo. Mauris sodales feugiat lorem. Donec malesuada tincidunt dolor.