Typography

Typography sets the foundation for any design project we work on.

In fact, we try to begin every project by first establishing the governing rules of type. Doing so insures that the content on this website is both legible and comfortable to read across all screen resolutions.

This is accomplished by taking into account everything from vertical rhythm to optimal line measures. All font sizes are set in relative em measurements which allows for the proportional scaling of font sizes at various design breakpoints. These pages represent base styles and rules for type and media and should be considered a work in progress.



HEADING 1

Above is an example of a top level header element, or the h1 tag. All page titles and ledes have been set in this tag. The Second Level Header tag,h2, has been relegated to any important page level headings.

HEADING 2

HEADING 3

HEADING 4

HEADING 5
HEADING 6

Block Quotes

Block quotes are section of content quoted from an external source or quotes pulled from the article itself. The blockquote may contain a p tag. For example, we are quoting Frank Chmero, from Quotes on Design, below.

If you can’t draw as well as someone, or use the software as well, or if you do not have as much money to buy supplies, or if you do not have access to the tools they have, beat them by being more thoughtful. Thoughtfulness is free and burns on time and empathy.Frank Chimero

Captioned Image Alignment

Captioned images can also be inserted, captioned and aligned with body copy. The following are examples of all four captioned image alignments.

Left Aligned Captioned Image

Fashion

Jelly candy canes tiramisu sweet marzipan caramels jelly-o. Macaroon pudding tart muffin I love macaroon lollipop pastry. Pastry I love cheesecake jelly pastry muffin. I love dessert pie danish chocolate cake. I love liquorice bear claw. I love chocolate cake caramels icing I love tootsie roll ice cream. I love chocolate cake. Apple pie I love gummi bears candy canes ice cream sweet carrot cake ice cream jelly beans. Fruitcake donut jelly beans macaroon ice cream I love caramels cake I love. Pie sugar plum sweet roll chupa chups halvah oat cake brownie donut. Tart croissant danish bear claw marzipan candy. Sugar plum bear claw chocolate cake cotton candy. Sweet chocolate cotton candy cheesecake I love cotton candy. Pie sweet roll jelly beans.

Right Aligned Captioned Image

Memories

Cookie sweet roll I love cheesecake candy canes. Topping cheesecake I love icing croissant sweet roll cake. Jelly dragée cookie biscuit donut cake candy canes. Jelly pastry danish halvah chocolate toffee cookie muffin. I love dessert I love chupa chups macaroon cookie I love apple pie gummies. Cotton candy I love I love sugar plum cheesecake. Muffin gummi bears chocolate cake chocolate bar. Fruitcake tart caramels marzipan. Soufflé apple pie pie cupcake toffee. I love gummies gingerbread sweet roll ice cream. I love I love jelly-o I love jujubes marshmallow tiramisu gingerbread. Danish gummies chocolate biscuit. I love oat cake muffin soufflé chocolate bar gummi bears caramels gummies sweet roll.

Ordered Lists

Ordered lists, or ol are used to list items in an hierarchical fashion. Each list item, or li, is preceded by a numerical representation of its place in the hierarchy. An ordered list can also contain another ordered list as well as an unordered list, or ul.

  1. This is the first item in an ordered list.
  2. This is the second item in an ordered list with a sub-ordered list.
    1. This is an ordered list item.
    2. This is an ordered list item
    3. This is an ordered list item
  3. This is the third item in an ordered list.
  4. This is the fourth item in an ordered list with a sub-unordered list.
    • This is an unordered list item
    • This is an unordered list item
    • This is an unordered list item

Unordered Lists

Unordered lists, or ul are used to list items without any hierarchical value to them. Each list item may be preceded by a bullet or any non numerical representation. An unordered list can also contain an ordered list as well as another unordered list.

  • This is the first item in an unordered list.
  • This is the second item in an unordered list with a sub-ordered list.
    1. This is an ordered list item.
    2. This is an ordered list item
    3. This is an ordered list item
  • This is the third item in an unordered list.
  • This is the fourth item in an unordered list with a sub-unordered list.
    • This is an unordered list item
    • This is an unordered list item
    • This is an unordered list item