Jump to content
sheilahoff

Learning to use em vs px

Recommended Posts

sheilahoff

I stumbled on this thread http://www.pagelines.com/forum/topic/23814-responsive-classic-menu/ while researching a customization question. As someone who started as a print designer and worked through table-based and html sites wanting high control over how things looked I've always used pixels for my font specs. I'm very glad to have found this thread early on and have just readjusted my Custom CSS. I found this useful conversion site: http://www.pxtoem.com.

 

It appears that this is all based on a base number for the body. Is that accurate? I'm not quite understanding how this part works. So if I change the font later will it all go haywire or adjust accordingly?

 

Also is it important for ALL specs to be in ems or just font sizes. I suppose padding, margins, etc should all be.

 

My dev site is currently at http://www.solsara.hoffmangraphics.com.

 

Thanks


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
greenfly

If you set a site wide font size, let us say 10px and you want to style your font in relation to your default font size you can use EM. 

 

1 Em is equivalent to 10px, 1.6EM is 16px and so on.. 

 

I recommend you take the CSS course here if you are getting to grips with CSS http://www.codeschool.com/paths/html-css it is Free and really very good. 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
sheilahoff

Thanks so much for that link. I will definitely be taking t course. So does PL have a site wide font size default that the rest is based upon? I've set H tags in CSS but hadn't bothered with anything for the p tag. How would one set a site wide font size as the base?

 

Also on an unrelated note: might you know what I need to change in my forum profile settings so that I do get the notification with the message but do NOT also get the notification that there's a response. It's redundant. I'm not sure what to turn off to retain the one I still want to get. Thanks.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Erwan

Sheila,

I'm quoting this very useful Pagelines doc I recently discovered: http://support.pagelines.me/docs/miscellaneous/using-typography/:

 

 

PageLines Framework’s global default font-size is 14px, with a line-height of 21px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

 

This doc provides many other priceless (IMO) details relating to typography in Pagelines. Hope it will help ;)

  • Like 1

Share this post


Link to post
Share on other sites
greenfly

Also meant to add - you can change the default size of your font using 

 

body {

 

font-size:10px

 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
sheilahoff

Thanks Martin. That was helpful. I converted to ems and added line-height.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Rob

Great.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×