YUI Fonts

Yahoo’s font system gives near pixel perfect rendering in all browsers. In a perfect world, we would achieve pixel perfect rendering by specifing font sizes in pixels. But you’ll find in some browsers (ok it’s ie6), you get that exact number of pixels no matter how the user resizes their fonts. To work around this, Yahoo recommends using percentages to set the font size. Percentage font sizes change the baseline font size and hence the value of 1em for that element and child elements. This redefinition of 1em is a good thing because it means that paddings and margins and box heights specified in ems will work correctly.

So yahoo tells their engineers (and us) to use percentages and then gives them a lookup table. YUCK!

@import yui/modules/fonts.sass
.bigger
  +font-size(18px)
.biggest
  +font-size(22px)

.bigger { font-size: 138.462%; }
.biggest { font-size: 169.231%; }

.bigger .biggest
  +font-size(22px,18px)

Source

See the YUI Fonts Module.

Importing

To import the YUI Fonts Module to any Sass File:

@import yui/modules/fonts.sass

Constants

The YUI Font constants can be overridden. For details on overriding constants see Overriding Constants.

Class & Element Mixins

Class mixins provide classes and/or define styles for elements. These will be scoped according to the selector you mix them into or they can be mixed into the top level of your stylesheet.

Style Mixins

Style mixins provide styles that can be mixed into any selector.