index.html

<h1 class="giga">Practical Font Sizing</h1>

<p>A simple pen demonstrating the concepts outlined in the CSS Wizardry article, <a href="http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/">Pragmatic, practical font sizing in CSS</a>. Uses a <a href="http://sass-lang.com/">Sass</a> function and a mixin to calculate the <code>rem</code> value and provide a pixel-based <code>font-size</code> fallback.

<h2 class="section-heading">No Classes:</h2>

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

<p>Paragraph style. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p><small>Small paragraph style. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</small></p>

<h2 class="section-heading">Classes Applied to Base Elements:</h2>

<p class="alpha">Paragraph with the <code>.alpha</code> class.</p>
<p class="beta">Paragraph with the <code>.beta</code> class.</p>
<p class="gamma">Paragraph with the <code>.gamma</code> class.</p>
<p class="delta">Paragraph with the <code>.delta</code> class.</p>
<p class="epsilon">Paragraph with the <code>.epsilon</code> class.</p>
<p class="zeta">Paragraph with the <code>.zeta</code> class.</p>

<h2 class="section-heading">SI Prefixes:</h2>

<h1 class="giga">Level 1 Heading (.giga)</h1>
<h2 class="mega">Level 2 Heading (.mega)</h2>
<h3 class="kilo">Level 3 Heading (.kilo)</h3>
<p class="giga">Paragraph (.giga): Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p class="mega">Paragraph (.mega): Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p class="kilo">Paragraph (.kilo): Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p class="milli">Paragraph (.milli): Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>

Practical-Font-Sizing.markdown

Practical Font Sizing

A demo pen based on a blog post from Harry Roberts of CSS Wizardry about Practical Font Sizing.

A Pen by William Dodson on CodePen.

License.

style.scss

@import "compass";
// Functions
//////////////////////////////////////////////////

// Calculates the relative em (rem) value
// for a given pixel value
//
// @param {string} $size the pixel value to convert to rem (e.g. 14px)
@function calculateRem($size) {
  $rem-size: $size / 16px;
  @return $rem-size * 1rem;
}

// Mixins
//////////////////////////////////////////////////

// Generates a relative em (rem) font size value
// with a pixel value fallback
//
// @param {string} $size the pixel value to convert to rem (e.g. 14px)
@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

/* Housekeeping */
* { margin: 0; padding: 0; }

/* Define your base font-size here; most elements will inherit this. */
:root, html {
  font-size: 1em;    /* Assuming 16px... */
  line-height: 1.5;  /* 24px (This is now our magic number; all subsequent margin-bottoms and line-heights want to be a multiple of this number in order to maintain vertical rhythm.) */
}

// give the body a font stack and a little bit of padding for the demo
body {
  font-family: 'Chaparral Pro', Georgia, serif;
  padding: 0 24px 24px 24px;
}

/* Common margin-bottom for vertical rhythm. */
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
fieldset,
p,
table,
pre,
hr {
  font-weight: normal;
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
}

/* These handle massive type, for less frequently occuring bits of text (e.g. in mastheads and banners). */
.giga {
  @include font-size(80px);
  line-height: 1.2;  /* 96px */
}
.mega {
  @include font-size(64px);
  line-height: 1.125;  /* 72px */
}
.kilo {
  @include font-size(48px);
  line-height: 1;    /* 48px */
}

/* Define headings and their associated classes here. */
h1, .alpha {
  @include font-size(32px);
  line-height: 1.5;  /* 48px */
}
h2, .beta {
  @include font-size(24px);
  line-height: 1;    /* 24px */
}
h3, .gamma {
  @include font-size(20px);
  line-height: 1.2;  /* 24px */
}
h4, .delta {
  @include font-size(18px);
  line-height: 1.333;  /* 24px */
}
h5, .epsilon {
  @include font-size(16px);
  line-height: 1.5;  /* 24px */
}
h6, .zeta {
  @include font-size(16px);
  line-height: 1.5;  /* 24px */
}

/* Smaller-than-body-copy sizes here. */
small, .milli {
  @include font-size(12px);
  line-height: 2;    /* 24px */
}

/* custom visual styles for the demo */
.section-heading {
  border-bottom: 1px solid #ccc;
}