Question

Recent convert to RoR and I've been using Compass w/ Blueprint to dip into the proverbial pool. Compass has been fantastic, but I've come across something strange within the Typography library.

The blueprint-typography-body mixin contains the following:

=blueprint-typography-body($font-size: $blueprint-font-size)
  line-height: 1.5
  +normal-text
  font-size: 100% * $font-size / 16px

My question revolves around "font-size." I'm a bit lost, as I would expect to pass in a font size and have that size reflected upon page load. However, in this scenario the formula seems to dictate a percentage against the default font.

ie:

+blueprint-typography-body(10px) //produces 7.5px off of the default font size of 12px from what I can tell.

In essence, I'm curious if there is a standard to setting font size within Compass other than explicitly declaring "font-size: 10px".

Note: The reason I'm leaning towards Blueprint/Compass font stylings is due to the standardization of line-heights, fonts and colors.

Was it helpful?

Solution

To be honest, the compass port of the blueprint typography is not fully configurable yet. So changing that default is probably not going to give you a proper font rhythm.

However, The next release of susy has a fully configurable vertical rhythm module that I helped build and it's pretty nice.

Susy

Vertical Rhythm Module

OTHER TIPS

Just read in the discussion on Compass documentation (Julio Antúnez's comment) that you can adjust font sizes like this:

@import "compass/typography"

$base-font-size:   14px
$base-line-height: 21px

header h1
  +adjust-font-size-to(18px)

Not sure this is recommended way but it works for me. I just started using Compass & Blueprint so above might cause problems elsewhere.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top