Most people find their own way of designing their websites and this can come from reading books or adopting standards found on other sites or within templates they may use for a rough layout but often many of the standards that have been use in the print publishing field do not really apply to good website design.
There are a number of measurements that you can apply to your fonts.
Points is a common standard in print publishing and desktop publishers or typesetters that moved to designing websites favor this measurement.
EM or ENs is another favorite based on the font point system it sets your base font such as 12 point as a 100% em and then you define the rest of your fonts up and down the scale by using that original value and offsetting as in … 12pt = 1em and a 16pt = 1.313em . The em measurement is really not for font sizes but for font spacing and I suggest you stay away from it.
Percentages are similar to ems and probably more straight forward for most of us to think in. A base font for your site at 12pt would have a 16pt font with the percentage value of 131.3%. However how many people can really think in those terms unless they are doing it as a profession day after day after boring day…
Pixels are a fixed measurement and are used for sizes of other elements on your website such as images, div or table widths and heights and embedded objects like videos. If you wanted a base font of 12pt then you would define it as 16px or 16 pixels high.
Personally I like to use the Pixel measurement in my designs because it is more reliable when you are defining text on your pages and menus. If you know that your menu bar is 30 pixels high then you can easily set your font height to 20 pixels and have padding on the top and bottom of the font.
What is the Technical Reason to use PT points or EMs?
Well first EMs like said above are measurements within the text that are not the actual font.. often used for hyphens or spaces and they flow based on the Point of the font…
Points are used in font declarations because Fonts are designed on a number of standard sizes and will display best at those fixed sizes. 10pt 12pt 14pt 16pt are standard .. if you were to define a font at 15pt or 14.7pt you would be absolutely no better off then defining with a pixel height but there is more to this story….
When you define your fonts you almost always give a range of font types that a visitor’s browser can use to display the information. font-family:arial,verdana,helvetica;
If you define 12pt Helvetica or Arial or Veranda or another font you can bet that all three of those fonts will have differing sizes when you use Points or Ems.
This will mean that some of your viewers with different fonts loaded in their systems will endup with menus that have fonts that are too big and overflowing or text that does not look similar…
There is nothing you can do about this with the exception of using Pixels as your measurement declaration….
With Pixels if you define a 12px pixel high font to be used in your menu the font will be displayed at 12 pixels high whether your visitor has a arial or helvetica font. Now yes there can be problems and often you will see them when windows fonts are used on linux systems and the font does not display as it should but you are more likely to have good results when you can fix the size across browsers, operating systems and font types.
Unfortunately there is not enough time to go into how in font designs the measurement of Base Height is defined but if you look into it or into one of our other howtos you will better understand that the base height of a font or point size can change between different types of fonts….
An easy way to see this is for you to open your word processor and copy past AaBbCc1234 and then define the text with different fonts at the same point size and print it and then measure it with a ruler or even just look at it on your screen because that is what your website visitors will be doing…
So, When someone says you should use Points or EMs to define your font sizes because it will allow your fonts to flow better … ask them what will happen if your visitor does not have the same font you do… They know it will change your layout dramatically but then again they only use mac’s so who cares about the other 98% of the world… HA!
And yes I did learn Type Design on a ITEC Typesetter before there were Macs… or WYSIWYG.
