> Then the client will compare the design they've > seen mocked up > in Photoshop with the online version, and something that I > get back as a > bug, time and time again is that the font-sizes don't match. > (we're talking > out by 1 or 2 pixels here, not massive differences) > > They're testing their font-sizes by taking a screen shot and > then using a > tool such as photoshop to measure and compare the pixel value.
Your clients really need to get out more :-) > If you open firebug and select a piece of text to then look > at the layout > optioni the values it gives are the measurements of the > surrounding element > area and not the actual font-size. So if you select a P it > measures the > area of the P, the same with any element. It will also > measure the full > height from the top of the tallest letter to the bottom of a > letter such as > a g/y/p etc. That's correct: the "Layout" tool shows the details of the box model as applied to that element. To find out what size the font is, select the "Style" tab, then use the "Options" menu in the upper right to show the computed style; this will give you the actual font size in pixels, no matter how it has been specified (ems, keywords or whatever). > Which I guess leads me onto another question, where is the > height measured > from typographically to give the pixel value in something > such as Photoshop. The size of a font, such as 18pt or 14px, is the notional equivalent of the size from top edge to bottom edge of a piece of metal type of the kind we used for 500 years from Gutenberg onwards: <http://www.interrobangletterpress.com/images/type/H.gif> This includes the space at top and bottom for ascenders (such as the top of an "h") and descenders (such as the tail of a "q"). The font also has an x-height, which is the height of the lower case letters without ascenders or descenders, and can have a considerable effect on readability across different media: for example Verdana has a greater x-height than Helvetica, which makes it more readable on the average monitor, but looks a little "Baby's First Alphabet" when printed on paper ;-) > >>If so you should be aware that these applications tend to render > >>anti-aliased fonts by default, but web browsers on the > Windows platform > >>rendering to a non-LCD display (or with an LCD where > Microsoft's ClearType > >>technology is not enabled) perform no anti-aliasing. > > I beg to differ as Safari on windows renders fonts smoothly, > and they look > stunning. Fonts on a Mac just look amazing too. It just > highlights how > shoddy fonts are in other applications on windows and makes > them look ugly. Yes, that's why I explicitly called out Windows: the Mac has antialiasing built-in to its font rendering, and Safari for Windows incorporates that code. The only native support Windows has for smoothing fonts is ClearType, which only works on LCD displays and is not turned on by default in older versions of Windows (pre-Vista). > I also feel that in todays market of ridiculously cheap electronic > equipment, we cannot assume that our clients will be using > such old machines > as you suggest. Of course we need to create websites that > will degrade > gracefully. It depends; a lot of big companies don't bother upgrading middle managers' machines very often, and a lot of small businesses can't afford the latest and greatest: if it runs their Excel spreadsheets, it's doing its job. > > >>At a design studio I worked at a few years ago I asked the > designers to > >>disable font smoothing in PhotoShop when mocking up web pages. They > >>complained that it made their designs "look ugly", but when > I pointed out > >>that they were just seeing what the end users would see, > they realised > that > >>it was better to work to the limitations of the destination > technology, > >>rather than show the client beautifully smooth designs > which were not, in > >>reality, achieveable in a web browser on Windows. > > Thats a very good idea, I will suggest it, I think it'll go > down like a lead > balloon with our design team. > They do tend to whine about it rather a lot, in my experience :D Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
