Best metric systems?

[Kervtuza]

Hey guys,

 

I was wondering if someone could explain the benefits of using px vs em? I don't quite understand how em works but I've been told that em has more benefits than px or pt when it comes to fonts and padding. What is the best way to determine which one should be used for what?

[LSW]

PX is pixels and is used for spacing padding etc. It is a measure of distance in pixels between things (Pixels being the dots of light that make up your monitor screen).

 

PT is Points and is the default form of sizing fonts in Print, it it the number of points of ink that makes up a letter or some such thing.

 

 

EM is "M", meaning the default size of the capital M is the chosen font. It is a measure of Font size. It is also equal to 100%.

 

• PX is used for spatial relationships between objects in a digital environment, use for example for spacing and margins. It can be used for fonts, but it is a set size.
• PT is only used in print media for Font size... on paper, use it if you are printing your design.
• EM/100% is a form of adjustable font sizing in a digital format like a web site:
  Early web design defined digital fonts in points, but it locked the size of the font to one size regardless if the user wanted text smaller or bigger or change resolutions and could make text hard to read for folks with poor vision.
  Now we use 100% or EM as this size is based on the users choice. it is either 100% font size, or the size of the capital M in a certain font.

Open a word document and type in some text using Verdana and Arial as Fonts, notice the difference? So if I choose some text, small print type of text and put it at 6pts. based on me using Verdana, in Arial it may be to small for you to read but fine for me... however the web site is built for you to use and not me.

 

Now if I define the font as 100%, it is 100% size of Verdana for me and 100% of Arial for you. So readable regardless of the fon/size YOU choose for you browser to fit YOUR eyesight.

 

If I define the font as 1em, the default size is the size of the Capital "M" in Verdana and the capital "M" in Arial for you.

 

100% / 1em = The default size YOU choose in YOUR browser. All default text.

 

60% / .6em = 60% smaller than YOUR default chosen font size. Maybe a Copyright notice.

 

120% / 1.2em = 120% larger than the default size of the text. Would be used to define headers for instance.

 

So just use EM or % for text and PX for object spacing. You can use PX for space between lines of text, but it will not change and can look weird at different resolutions for Font sizes. Best to use % or EM for character and line spacing as well.

 

I have used both Em and %, it does not matter which you use, I just prefer % as more intuitive than what the M looks like in any one font.

[Kervtuza]

Thanks! That is some great information, one more question that came to mind though, is it safe to use special fonts, I came across a site that provides external stylesheet links to custom fonts, are these safe to use on a web page in a sense that older browsers may not support them?

[LSW]

A browser can only show the Fonts installed on a machine. If it does not exist it will default to either a Font it thinks is right, or any fonts suggested in the CSS.

 

So always add a default font or two or three like Times Roman for Mac, Arial and or Verdana for Windows. You never know what you will get if the browser chooses, maybe unreadable cursive.

 

You should really only use special fonts in banners etc and not content.

 

The only other way is to embed the font, this is likely easier now then in my day, but it requires forcing the user to download the font with the site.