SASS Mixin with keyword font-size fallback

_mixins.scss

@mixin font-size( $decimal-size, $keyword: null ) {
  @if $keyword{ font-size: $keyword; }
  @else { font-size: $decimal-size * $base-font-multiplier * 16px;}
  font-size: $decimal-size * 1rem;
}

_smallest.scss

html {
 @include font-size(1, large);
}

_variables.scss

$base-font-multiplier: 1; // master font size integer

SASS REM Mixin

The Problem

REMs are the future as far as units of measurement for the future, responsive web. Mr. Coyier and Mr. Snook have both posted several articles and blogs about the benefits of using REMs over pixels or ems. However, there is one drawback to using this approach, accessibility in IE6, 7, and 8. Ems and pixels are not scalable. If a user decides to bump the text-size in their browser up the pixel and em based fonts will not budge. Now, a user can zoom the entire page, but maybe this behavior isn't optimal. IE 6 doesn't even have the option for a full page zoom, so users are completely stuck.

The Solution

At Sparkbox we decided we had to figure out a solution to this problem. We looked at our usual REM mixin and thought there had to be a way to include scalable text for these older browsers - we figured it out. Using our mixin, simply pass in a font-size keyword for those elements where the text must be accessible. Obviously giant headings don't necessarily need to be scalable as they already are huge. If no keyword is included then the px-based value is included.