SlideShare a Scribd company logo

Week 12 CSS Font - size

•Download as PPTX, PDF•
•
Katherine McCurdy-Lapierre, R.G.D.
Katherine McCurdy-Lapierre, R.G.D.

This document discusses font sizes and units. It explains that absolute sizes like pixels are not scalable for accessibility, while relative units like ems and percentages allow text to scale appropriately. Percent is recommended as the best unit as it provides a consistent display when computer settings change. The document also covers other font size specifications like keywords and line height for readability.

Related slideshows

Elegant Web Typography
Elegant Web TypographyElegant Web Typography
Elegant Web Typography
 
Fonts
FontsFonts
Fonts
 
Print design vs web design
Print design vs web designPrint design vs web design
Print design vs web design
 
1 of 10
WEEK 12 FONTS: SIZE
FONT SIZE Absolute size: • Sets the text to a specified size • Does not allow a user to change the text size in all browsers (bad for accessibility reasons) • Absolute size is useful when the physical size of the output is known Relative size: • Sets the size relative to surrounding elements • Allows a user to change the text size in browsers
FONT SIZE UNITS: RELATIVE VS. ABSOLUTE UNITS Unit Shortened Scalable? Description “Ems” em • Yes • Relative • The current font-size is equal to 1em Example: • If the font-size of the document is 12pt, 1em is equal to 12pt • Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt Pixels px • No • Absolute • One pixel is equal to one dot on the computer screen • Allows for precise design • But…pixel units don’t scale upward for visually-impaired readers or downward to fit mobile devices Percent % • Yes • Relative • The current font-size is equal to 100% • Example: 12pt = 100% Points Pt • No • Absolute • Generally used for print media
FONT SIZE • Generally, 1em = 12pt = 16px = 100% • If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em) • If you changed the body’s font-size attribute, the em and percent units get larger, but pixels and points would not • Eg. paragraph styles with a pixel size would not get larger – this is not a good for accessibility or user experience
SIZE KEYWORDS Yet another way to define font size is with keywords: • xx-small • x-small • small • medium, • large, • x-large • xx-large • as well as relative keywords smaller and larger
WHAT SIZE UNIT SHOULD I USE? • The percent unit seems to provide a more consistent and accessible display for users • When computer settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design The winner: percent (%)
HOW DO I WRITE THAT IN CSS? body { font-size: 100%; } p { font-size: 90%; } • In this case the page would display fonts at the default size of the browser (usually around 16px) and it would display text in paragraphs at 90% • Remember the cascade part of CSS: things you define can take on other measurements in other styles
TRY IT OUT! Check the link in week 12 to W3C schools and try experimenting with the size of the headings and paragraphs
LINE HEIGHT • Line height changes the space between lines of text • Too tight or too loose makes reading difficult
LINE HEIGHT • Ideal line height is comfortable to read:

More Related Content

Week 12 CSS Font - size

  • 2. FONT SIZE Absolute size: • Sets the text to a specified size • Does not allow a user to change the text size in all browsers (bad for accessibility reasons) • Absolute size is useful when the physical size of the output is known Relative size: • Sets the size relative to surrounding elements • Allows a user to change the text size in browsers
  • 3. FONT SIZE UNITS: RELATIVE VS. ABSOLUTE UNITS Unit Shortened Scalable? Description “Ems” em • Yes • Relative • The current font-size is equal to 1em Example: • If the font-size of the document is 12pt, 1em is equal to 12pt • Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt Pixels px • No • Absolute • One pixel is equal to one dot on the computer screen • Allows for precise design • But…pixel units don’t scale upward for visually-impaired readers or downward to fit mobile devices Percent % • Yes • Relative • The current font-size is equal to 100% • Example: 12pt = 100% Points Pt • No • Absolute • Generally used for print media
  • 4. FONT SIZE • Generally, 1em = 12pt = 16px = 100% • If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em) • If you changed the body’s font-size attribute, the em and percent units get larger, but pixels and points would not • Eg. paragraph styles with a pixel size would not get larger – this is not a good for accessibility or user experience
  • 5. SIZE KEYWORDS Yet another way to define font size is with keywords: • xx-small • x-small • small • medium, • large, • x-large • xx-large • as well as relative keywords smaller and larger
  • 6. WHAT SIZE UNIT SHOULD I USE? • The percent unit seems to provide a more consistent and accessible display for users • When computer settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design The winner: percent (%)
  • 7. HOW DO I WRITE THAT IN CSS? body { font-size: 100%; } p { font-size: 90%; } • In this case the page would display fonts at the default size of the browser (usually around 16px) and it would display text in paragraphs at 90% • Remember the cascade part of CSS: things you define can take on other measurements in other styles
  • 8. TRY IT OUT! Check the link in week 12 to W3C schools and try experimenting with the size of the headings and paragraphs
  • 9. LINE HEIGHT • Line height changes the space between lines of text • Too tight or too loose makes reading difficult
  • 10. LINE HEIGHT • Ideal line height is comfortable to read: