Build Your Own Business Website header image

A Discussion of How Thesis Calculates Page Width Using Pixels and Ems

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is a follow up question to the session “A Discussion of the differences between the Thesis Full Width Framework and the Page Framework” and in this session we discuss how Thesis calculates a page framework’s width by pixels and ems.

Video Transcript

I sent you a question earlier and now that you were talking about the difference between the page framework and the full width framework, I actually understood how Thesis is calculating the size of them, the columns and such because I was having a hard time. I tried to see, when I was looking at either the layout or the style CSS, most of the columns were… the values were expressed in ems whereas when you use them, the Design Options in Thesis, you insert those values as pixels. So you know, I was always trying to figure out how that was calculated because when I was doing the math, there were always some pixels off. I wanted to see what actually the width of either the header or that or the main container area was. So thanks for that, now I understand.

Well and the reason why this is the case is because Chris Pearson, the author of Thesis, has very specific opinions about typography. And so he wanted to make sure that he could define line heights and margins and padding based on ems rather than on px because of the difference in the way Macintosh and Windows computers or machines display those things. And so what he did was he creates… he starts off making 1 em = 10 pixels. And then from that definition, if you say you want your fonts to be 14 pixels tall then then he calculates the font size as1.4 em. And then he uses that 1.4 em as the number by which he calculates line heights and margins.

And so if you have a page that’s 600 with 2 columns, that’s 600-pixels column a 300-pixel column, obviously, the page isn’t 900 pixels. The page is 900 pixels plus padding on either side plus padding between the columns. And if you’ve chosen a font size of 12 pixels, that overall page width is going to be different than if you choose a padding of… a font size of 14 pixels because of the way he uses em to do the calculation. And so you know, you end up having to figure out… I mean, it’s always best to know exactly you know, what the governing requirements for the columns are and then what your font size, desired font size is when you start because that’s what setting up every other width calculation is set up based on that.

Will that be the font size of the body set up on the…

Yes, it is. Yeah.

Okay so then you asked whether or not… what are my preferences for widths and heights and values, px or em. I use, in my plugins and in my writing… I mean, in my custom CSS stuff, I use pixels instead of ems. One of the reasons is because ems are additive. So if you have a base em… if you’ve got a div that has… that where the font size is 1.4 em and then you put another div in and give it a font size of 1.4 em, the actual font size in there is 1.4 times 1.4 and not 1.4 because each container… an em is a multiple of the base of the container. And so it gets confusing after a while because if you’ve got a… if you placed a div inside of format text, the div format text is given a font size of 1.4 em and then if you put a div inside of that and specify a font size of 1 em, it’s actually going to turn out 1.4 em because the 2nd is a multiple of the first.

And so I find that most people find that confusing and so since I want, my plugins, I want them to be relatively easy for somebody to say, “I want my font size there to be 16 pixels.” I don’t want to have them figure out… “Okay well, let’s see. So in this case it’s contained in something that has this so I’ll do this.” And I just… I override that em with an explicit pixel size. But that’s the reason why I do it just because otherwise you know, 1 em in the content area is different than 1 em in the sidebars and different than 1 em in the footers. And the reason is because he’s given each of those sections their own base size and that base size gets multiplied by anything you say.


So that’s why I use px, just to make it easy on myself and others.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment