With the latest version of Genesis, Studiopress has revamped their default stylesheet, including the use of the rem unit for font sizes and padding / margin.

This will take some getting used to, as you can see in the conversion table below:


This style sheet uses rem values with a pixel fallback.
The rem values are calculated per the examples below:

12 / 16 = 0.75rem
14 / 16 = 0.875rem
16 / 16 = 1rem
18 / 16 = 1.125rem
20 / 16 = 1.25rem
24 / 16 = 1.5rem
30 / 16 = 1.875rem
36 / 16 = 2.25rem
42 / 16 = 2.625rem
48 / 16 = 3rem

Further reading on the use and compatibility of rems:

http://caniuse.com/rem

http://snook.ca/archives/html_and_css/font-size-with-rem

If you want to use different font sizes, you’ll have to start doing some math to convert your pixels to rems.
Plus, you’ll have to declare the font size twice because you need a fallback for browsers that don’t understand the rem unit


font-size: 36px;
font-size: 2.25rem;


I suggest you start learning Sass. It’s not difficult to get started with, especially on a MAC, you can grab Codekit which will do the heavy lifting for you.
There are many tutorials on getting started with Sass around the web, here are a few:
On this youtube channel, you’ll find Sass and Compass tutorials:
http://www.youtube.com/user/LevelUpTuts/videos?view=1&flow=grid

Once you’ve got your theme Sass-ready, you can start using these useful functions:

A Sass mixin for calculating padding or margin from pixels
https://github.com/SimonWpt/rem

A Sass mixin for calculating font sizes from pixels:
http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/

Now, I had to modify this slightly, because the base font size was 13px.
So I defined the base font size as 81.25%, instead of 100%.Then I changed how the font size mixin calculates the rem units

Now you can just use this:

@include rem(‘padding’, 16px 0 0 0);

@include font-size(1.3);


Other Sass mixins you might find useful
http://css-tricks.com/custom-user-mixins/