Typography styles

We typography — So we’ve given you a bit more than just a set of headers!

p.lead Foundation 3 uses a modular scale to generate typography. That means a great, logical relationship for your copy whether you use the Scss version or just download the CSS.

<h2> Design is so simple, that’s why it is so complicated.

<h3> Design is thinking made visual.

Sed volutpat, augue a imperdiet vehicula, diam elit laoreet felis, eu dapibus leo sapien nec mi. Phasellus et quam nunc, eget volutpat purus. Nullam pharetra ante eu orci euismod nec semper est blandit. Nullam felis felis, semper in mollis sit amet, eleifend vel metus.

There’s no shortcut for greatness.

Quisque malesuada viverra augue, a facilisis quam tempor sit amet. Praesent laoreet suscipit sagittis. Curabitur at tellus lectus, sit amet viverra erat. Cras tristique, odio ac ultrices commodo, lectus lacus fringilla dui, sed mollis ipsum ante malesuada enim.


<h4> Design is the method of putting form and content together.

Cras vestibulum mauris in arcu mattis sed tempor lectus eleifend. Etiam neque ante, elementum sed egestas ac, sollicitudin at ante. Quisque malesuada bibendum ultricies. Maecenas dignissim mollis nunc, a bibendum turpis fermentum eu. In vulputate suscipit tortor. Sed tristique lacus sed augue interdum ornare.

<h5> You can observe a lot just by watching.
Donec ultricies ligula sit amet arcu tempor dapibus. Suspendisse non ligula est. Vivamus tincidunt lacus at massa adipiscing ultricies. Nunc at nisi diam. Praesent pellentesque fringilla tortor. Sed eget diam sit amet est accumsan euismod ac eu tellus. Donec mi eros, vestibulum ac mattis et, convallis a augue.
Did you know?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo.

find out more

<h6> Design in the key to everything. If you learn how to design you can do anything.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, nunc et luctus viverra, massa ante dapibus eros, ut tempus enim nibh non leo. Integer dictum faucibus turpis. Proin ut turpis diam, ut imperdiet purus.

h1 header

h2 header

h3 header

h4 header

h5 header
h6 header

h6 header Small header text.
h5 header Small header text.

h4 header Small header text.

h3 header Small header text.

h2 header Small header text.

h1 header + small part


Link in a header

Link in a header

Link in a header

Link in a header
Link in a header

h1 header

h1.subheader text

Donec lorem augue, rhoncus at sollicitudin at, interdum vitae erat. Morbi dolor felis, pellentesque ut viverra quis, aliquet a velit. Ut dignissim semper ligula eu placerat.

h2 header

h2.subheader text

Nam sodales mauris ut felis mattis bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h3 header

h3.subheader text

Integer eget eros nisl. Vivamus commodo augue vel risus imperdiet tincidunt. Maecenas feugiat, tortor sit amet tempus tempor, felis eros scelerisque ante, non ultricies tellus mi at augue.

h4 header

h4.subheader header

Proin nisl eros, congue sit amet vulputate a, posuere at lectus. Sed augue augue, cursus sit amet condimentum nec, vulputate nec orci. Proin lorem tortor, faucibus ac semper et, varius vitae magna.

h5 header
h5.subheader header

Mauris nec molestie mauris. Cras eu neque orci, convallis tempus dui. Nunc metus nunc, venenatis non sollicitudin eu, varius vitae tortor.

h6 header
h6.subheader header

Morbi tincidunt lorem nec lorem imperdiet venenatis cursus est molestie. Nam ac libero ut nibh volutpat gravida sit amet sed orci. Donec molestie risus pharetra metus dapibus porta.

ul
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.dash
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.block
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.small
  • List item with a much longer description or more content.
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
ul.large
  • List item with a much longer description or more content.
  • List item
  • List item
  • List item
ul.very-large
  • List item with a much longer description or more content.
  • List item
  • List item
  • List item
ul.disc
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.circle
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.square
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.checkmark
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
ul.cross
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
li.checkmark or li.cross
  • List item with a much longer description or more content.
  • List item
  • List item
  • List item
  • List item
  • List item

  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
  4. Ordered List Item
Definition Title
Definition text, you can add as many of these as you need. The line-height matches paragraphs.

Donec eget purus urna, non consectetur orci. Aliquam neque odio, blandit a faucibus nec, rutrum non leo. Morbi imperdiet nulla in ligula vestibulum blandit vitae ac orci. Fusce blandit consequat felis ac sagittis. Nullam turpis nibh, congue nec placerat quis, dictum sed arcu. Ut nec risus ante, eu condimentum metus. Ut convallis, justo in tempor ullamcorper, lectus lacus dapibus magna, id dictum felis nunc id orci.

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
John Doe

13 thoughts on “Typography styles


  1. admindino

    Hi everyone! I hope you like this article. This comments placed here to show admins’ comments stylization. Let me know what you think about it?


  2. Wow, you really have nice styles here, but you forgot this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac augue tortor, ut lobortis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum placerat, mi ut egestas commodo, tortor sem imperdiet nunc, in hendrerit lacus nibh eget nisl. Fusce non risus molestie tellus suscipit viverra. Donec varius, nisl at tincidunt aliquet, dolor tortor ornare diam, sed dapibus nunc turpis eget ante. Sed non ligula ante. Morbi porttitor ornare odio vitae facilisis. Mauris eu volutpat neque.


    1. admindino

      This an example of reply comment made by admin.


      1. Another User

        Really great. This looks like a good solution for a long searched and by many tried idea. think, some people will start to use BV because of this. Congrats!


  3. Just a Name

    This is a novel take on the web typography. Well-played, Blue Vanga, well-played.



  4. Another User With a Very Long Name

    I have a long name, but short comment.




      1. Marin Brown

        What about block-quotes?

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eros in nisi aliquet id pulvinar lectus facilisis. Proin at neque lectus, sit amet bibendum justo.


        1. Victor Lemon

          Third level comment with cite: Proin placerat augue a tellus sodales eu vehicula lectus mattis. Nulla et turpis nisi, in interdum dolor. Nullam ac erat ligula.



  5. Jack Mallboro

    Alright! Morbi vitae mi nisi, vitae blandit nisl. Morbi fermentum, tellus at pulvinar pulvinar, lorem dolor porttitor mi, quis lobortis lacus ligula id urna.

Comments are closed.

Talk to a Professional today

Ready to start talking to an expert about your Marketing and Web Presence?
Get a Quote

Free 30 min Consultation