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!

Compass to the rescue:

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

Will emit:

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

The percentages are calculated by dividing by a base-size which defaults to !yui_default_base_font_size which defaults to 13px. However the base size can be specified explicitly as a second argument. So in the example above, if we wanted to correctly support a .biggest element nested within a .bigger element we’d need to add an additional style rule:

.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.

Name	Overridable?	Default Value	Description
!yui_default_base_font_size	Yes	13px	The default font-size.
!yui_default_base_line_height	Yes	1.231	The default line height.
!yui_default_font_family	Yes	arial,helvetica,clean,sans-serif	The default font-family.

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.

Mixin	Description
+yui-base-fonts([family, size, line_height_])	Base fonts, you can specify different values for the fonts, but you probably should use constant overriding.

Style Mixins

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

Mixin	Description
+font-size(size[, base_font_size])	Generates a percentage by dividing the size by the base_font_size.