Week 12 CSS Font - size

1. WEEK 12
FONTS:
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: