Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

CSS - Units of Measurement in Typography

• Pixels
• Percentages
• Ems
• Points and Picas
• Links

Pixels

Pixels (px) define an element's size using a specific humber of pixels. It gives the web designer exact control over the size of the element.

Concerns

• It does not allow the user to change the font size using their browser settings.
• It is an accessibility issue since users cannot change their font size, the web designer should allowing the user to choose from two or more different style sheets.
• Print media does not use pixels so the printer will have to guess what you meant.

Percentages

When assigning percentage units (%) to a property that isn't font-size or line-height, that value always relates to the parent block of that element.

• Percentage units in font-size or line-height properties acts like the Em unit
  For example: font-size: 100%; acts the same as font-size:1em;

Ems

The em unit is a realitive unit of measurement in CSS. It can be used to automatically change the displayed font size based on the size set in the viewer's browser preferences.. The em unit measurement allows the viewer to change the font size as needed for their legibility, but the web designer control the hierarchy of the sizes because the size is relative.

The web designer can use pixels or points for the navigation and footer but use em units for the body. Elastic design uses em values for all elements.

• 1em is equal to the default font sizeFor example: if the user specified 12 point as their default size, then the em unit is based off of 12 point type.
• 2em is equal to 2 times the size of the default font For example: if the defaut size is 12 pt, then '2em' is 24 pt
• 0.5em is equal to 1/2 the size of the default size font
  ,For exampe: if the defaut size is 12 pt, then 0.5em is 6 pt
• Ems can be specified to three decimal places: 1.074em

Example: This is in 1em

Example: This is in 2em

Example: This is in 0.5em

Points and Picas

Points and Picas are print media units of measurments.

• 1pt (point)= 1/72 of an inch
• 1pc (pica)= 1/6 of an inch

Printed documents understant these measurements but websites have to guess how to convert these units into pixels so they should not be used for websites.

Link

• The Incredible Em & Elastic Layouts with CSS

top of page

Page last updated: May 31, 2012 10:25 AM