MODULAR SCALE : STARTER KIT

This Starter Kit is meant to introduce the concept of Modular Scale in responsive typography. You can view the effect by making the browser window wider or more narrow. I have adjusted all math to be more photoshop friendly and annotated the font-size calculations in the CSS code.

A .zip archive of these files can be downloaded here.

@media only screen and (min-width: 1200px)

@media only screen and (min-width: 992px)

@media only screen and (min-width: 768px)

@media only screen and (min-width: 576px)

@media only screen and (max-width: 480px)

H1 headline. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet.

H2 headline. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet.

H3 headline.
Lorem ipsum dolor sit amet.

H4 headline.
Lorem ipsum dolor sit amet.

H5 headline.
Lorem ipsum dolor sit amet.

This is an ordinary paragraph that is long enough to wrap to multiple lines so that you can see how the line spacing looks. A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea.

This is a text link to illustrate what hyperlinks look like inside text blocks.

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

This small text is small for the fine print, etc.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molustie lorem at massa