[caption id="attachment_129462" align="aligncenter" width="600"]
Imagine you’re visually impaired or have a reading disability. The browser comes with a font size setting built in, so you increase the default font size and you start browsing. Oddly, the text on most sites still seems small, so you go back to the browsers settings and increase font size to huge. You return to the website you were on and... nothing. The setting has no effect.
Past few years, we have learned how to use and gradually accepted relative units for typographic content. Instead of using pixels for properties like font-size, most values are rem or ems.
Many developers still set an ‘initial’ font-size on the html or body tag, often using px as unit. If you don’t fully understand (and appreciate) relative units, this might be convenient for you, as all em and rem are now relative to that initial value.
/* A body containing a font-size with absolute value */
body { font-size: 14px; }
/* The h1 will be 2em relative to 14px */
h1 { font-size: 2em; }
Unfortunately, that initial value isn’t convenient for some users. You see, that browser setting I mentioned earlier, only sets the base font size. Every absolute unit (px, pt, inch, etc.) you use, overwrites that.
/* Fictional browser setting */
html { font-size: 18px; }
/* The absolute unit in the body overwrites the browser setting */
body { font-size: 14px; }
Continue reading %Stop Maiming Bodies: The Perils of Pixel Font-Size%
by Tim Severien via SitePoint
No comments:
Post a Comment