Prev | Current Page 107 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"


You might notice that the default sizes for common markup elements
such as

through

,

,

    , and
  • are rather
    (read ???very???) large, and if you need to get any amount of content
    on the page, using these default sizes means the user must do lots
    of scrolling. Long hours of usability testing have taught me that
    scrolling is one of the least loved aspects of Web browsing. Also,
    I simply ?¬? nd that these large default sizes give the page a horsy,
    poorly designed look. But, when working in proportional ems, you
    can choose to make the overall font size a little smaller, because
    those users who want larger text sizes can get them easily by selecting
    View > Text Size from the browser menu and choosing Larger (or
    similar, depending on the browser).
    Let??™s say you decide that the new baseline size is going to be 12 pixels
    (from a visual standpoint, that is; you will use percents and ems
    to actually specify the sizes). You set the body font size to .75 em,
    and text in a paragraph then displays at 75 percent of the browser??™s
    16 pixel default size for paragraphs, or 12 pixels.
    Remember, when you style the descendant elements, they inherit the
    new baseline size and the proportional effect is compounded??”so, a
    font size of 1 em equals 12 pixels, .75 em equals 9 pixels, and so on.
    The takeaway here is that if you are using a proportional value method
    (for example, ems) to size the fonts for the individual selectors, you
    are then able to provide the majority of viewers with smaller font sizes
    that are more aesthetically pleasing, that result in less scrolling, and
    that still give visually impaired users the option to override your font
    size decisions and increase the size of all type proportionally.


    Pages:
    95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119