brown2005 Posted March 13, 2008 Share Posted March 13, 2008 i've been told that it is better to use em instead of px for font-size.. i have found this conversation table. and was wondering if it is correct 9px = 0.5625em 10px = 0.625em 11px = 0.6875em 12px = 0.75em 13px = 0.8125em 14px = 0.875em 15px = 0.9375em 16px = 1.00em 18px = 1.125em 20px = 1.25em 24px = 1.50em 28px = 1.75em 32px = 2.00em with the body as below body { font-size: 100.01%; font-family: arial, helvetica, sans-serif; color: #333333; line-height: 1.5em; } is this correct or is there a better way? Quote Link to comment Share on other sites More sharing options...
haku Posted March 13, 2008 Share Posted March 13, 2008 I have no idea if its true - I always just enter a couple numbers and narrow in on the size I want. Quote Link to comment Share on other sites More sharing options...
jerry_sidower Posted March 13, 2008 Share Posted March 13, 2008 Unfortunately there is no universal way to convert px measurements to em measurements. James Whittaker explains that "An em is a relative measurement based on the square of the font size at that particular point. As font sizes can vary across differing systems and displays, the result is that the em measurement will always be relatively sized and scalable." This means that the value of 1 em will vary depending on what font is being used. Px sizes are dependent on the screen resolution of the user, while em sizes are dependent on both the font being used and the base size of that font used on the page. Although the values you worked out may work for the font and resolution you had, it will not carry over so gracefully to other fonts. For more information check the following article on James Whittaker's site: http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/ Cheers, Jerry Sidower Quote Link to comment Share on other sites More sharing options...
haku Posted March 13, 2008 Share Posted March 13, 2008 While everything that was in that post was correct, the OP included a base font size from which all the em sizes could be calculated. I have no doubt that the chart was correct insofar as that goes. Quote Link to comment Share on other sites More sharing options...
lordfrikk Posted March 13, 2008 Share Posted March 13, 2008 Just do it like this, it will also enable most browsers to increase/decrease font size properly. body { font-size: 62.5%; /* 16px × 62.5% = 10px */ } h1 { font-size: 2em; /* 10px × 2em = 20px */ } p { font-size: 1.2em; /* 10px × 1.2em = 12px */ } ... More info here: http://www.maratz.com/blog/archives/2005/10/21/typetesters-base-font-size/ Quote Link to comment Share on other sites More sharing options...
jerry_sidower Posted March 13, 2008 Share Posted March 13, 2008 You are very correct, Haku. However, the OP never specifically mentioned which font the chart was derived from. He later asked if the chart would apply to the CSS code he listed. I am unable to answer this, as the font-family contains a great number of fonts, and each font could potentially have a different px height when viewed at the different em values. For example, take this situation: A capital letter "X" in the "Arial" font and viewed at 1em stands 12px tall. The same capital letter "X" in the "times" font and viewed at 1em only stands 11px tall. The only change made between these two was the font being used, and since em values are dependent on the font the final rendered character came out to be 1px smaller for the "times" font. I realize that these two fonts are actually from different families, but it demonstrates that different fonts will display differently, despite having a consistent em value. Because of this, there is no silver bullet equation for converting px values to em values when you are concerned with more than one font. So to conclude, the table the OP found may work for one of the fonts listed in his CSS code, but may not work for all of them. In the end though the differences will probably go unnoticed when dealing with smaller font sizes, so feel free to use the table. I'm afraid I do not know anything about Lordfrikk's method, as I do not usually make changes to the base size of the font. The article he mentions is well worth a read. I will have to take a more in-depth look at these methods and see how they work out. Personally I've always just used Haku's technique and toyed around with the values until I got something that I liked. Cheers, Jerry Sidower Quote Link to comment Share on other sites More sharing options...
haku Posted March 13, 2008 Share Posted March 13, 2008 Actually, you are incorrect here. An em is based on the font size at the time, not on the font. Using the code that he did, em's will remain the same size regardless of the font you use. While an em is approximately the size of the letter 'm', thats just where it is derived from, it doesn't actually mean the letter 'm' for the font you are using. Just for the font size you are using. See the first line here: http://en.wikipedia.org/wiki/Em_%28typography%29 Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 14, 2008 Share Posted March 14, 2008 The link that lordfrikk posted is to the description and blog. A better link would be the actual online conversion tool he created Type Tester While his technique is great for blogs and limited content pages, it has potential danger for more involved pages where there are more than three levels of content (since any resize of a level changes the base relative size of the font from the body to the parent container ... 1em becomes relative to the container NOT the body). I am so far getting very comfortable using Dan Cederholm's technique of using "small" for the body font size (with x-small in my IEonly.css file). Quote Link to comment Share on other sites More sharing options...
thetar Posted March 17, 2008 Share Posted March 17, 2008 wow, thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.