Hot File

Stop Maiming Bodies: The Perils of Pixel Font-Size

View: 232    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: WordPress template   Fields: Other

9 point/2 review File has been tested

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

Introduction

An eye test for pixel size

                                                                   Artwork by SitePoint/Natalia Balska

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.

Font size setting in Google Chrome

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 remare 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 (pxptinch, 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; }

As a result, users who change the browser’s font size setting will still see text in 14px, even though they explicitly set the font size to something larger.

 

The Difference Between Zooming and Font Size

One of the arguments I get is: “Zooming works, isn’t that the same thing?”

Pretty much all browsers have the ability to zoom in, which enlarges the entire page. Technically, it enlarges every unit, except for percentages. This is great for the visual impaired, like users suffering visual acuity (clarity). Most visual acuity can be corrected using glasses, but in too many cases, it can’t.

Changing the browser’s font size, however, exclusively changes the base font size. Some people have perfect vision, but have a reading disorder, like Dyslexia. In fact, 3-7% of the population suffer from Dyslexia, but up to 20% can experience its symptoms. Increasing font size can decrease the symptoms’ severity. Why should they zoom into a page, when they have the ability change the font size only?

The Right Way

Absolute units are the bad guys here. If we use relative units, like % and em, the browser’s settings are respected. By default, 1em is approximately 16px. So, if you really want to use a non-default font size, you can set font-size to .875em or 87.5% for 14px.

/*
These are equivalent:
- font-size: 100%;
- font-size: 1em;
- absent font-size property
*/
body { font-size: 1em; }

/* If the users changes the browser setting, both the body text and h1 text will scale accordingly */
h1 { font-size: 2em; }

Absolute units for typographic properties is a common practice in the industry. Probably because it’s explicit, whereas relative units require some digging to find out why a deeply nested element may have a different computed font-size than an element in the body.

The problem is that it is a major accessibility flaw. To make the web great for the visual impaired or those with a reading disability, we have to use relative units

Stop Maiming Bodies: The Perils of Pixel Font-Size

Stop Maiming Bodies: The Perils of Pixel Font-Size Posted on 10-05-2016  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 4.5/10 232

Comment:

To comment you must be logged in members.

Files with category

  • 11 Powerful Tips and Techniques in wordpress

    View: 413    Download: 0   Comment: 0   Author: none  

    11 Powerful Tips and Techniques in wordpress

    Category: WordPress template
    Fields: Other

    0/1 review
    Debugging is an essential skill for any developer. This tutorial will show you 11 powerful ways to debug WordPress and PHP errors.

  • MH Edition Lite Responsive WordPress Theme 2017 Free

    View: 546    Download: 6   Comment: 0   Author: none  

    MH Edition Lite Responsive WordPress Theme 2017 Free

    Category: WordPress template
    Fields: Other

    0/1 review
    MH Edition lite is a flexible and visually sophisticated WordPress theme for technology and news magazines. This magazine theme can transform your current WordPress website into a powerful and yet lightweight online magazine or dynamic news website...

  • Morning Monday Lite Responsive WordPress Theme Free

    View: 518    Download: 7   Comment: 0   Author: none  

    Morning Monday Lite Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    1.5/3 review
    Morning Monday Lite theme is designed for magazine with flexible layout. The theme is based on KOPATHEME layout manager technique that will let you flexibility choose layout options of every pages within your site.

  • How to Translate a WordPress Plugin Description

    View: 538    Download: 0   Comment: 0   Author: none  

    How to Translate a WordPress Plugin Description

    Category: WordPress template
    Fields: Other

    0.020325203252033/246 review
    If you’ve developed a useful plugin for WordPress, that’s great – but it’s even better if you make your plugin accessible to users speaking other languages.

  • Lovecraft Responsive WordPress Theme Free

    View: 437    Download: 1   Comment: 0   Author: none  

    Lovecraft Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    2/2 review
    Lovecraft is a beautiful two-column theme for bloggers. It features a responsive design, great typography, a full-width header image

  • Ascent Theme is a fully responsive WordPress theme

    View: 5019    Download: 0   Comment: 0   Author: none  

    Ascent Theme is a fully responsive WordPress theme

    Category: WordPress template
    Fields: Other

    4.5/1 review
    Ascent Theme is a fully responsive WordPress theme that looks elegant on any devices. It is simple, clean and lightweight WordPress theme based on the most modern technologies like HTML5 and CSS3.

  • Photolab Responsive WordPress Theme Free

    View: 523    Download: 0   Comment: 0   Author: none  

    Photolab Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    4/1 review
    Photolab theme echoes a flat design approach and a modern clean look perfect for creating an engaging blog. Its layout inspired by the latest trends underlines visual excellence of the theme without distracting from the content.

  • ZeroGravity is a simple and light WordPress theme

    View: 465    Download: 0   Comment: 0   Author: none  

    ZeroGravity is a simple and light WordPress theme

    Category: WordPress template
    Fields: Other

    4.5/1 review
    ZeroGravity is a simple and light WordPress theme with a clear and neat design. Some its features are: left sidebar or right, custom theme color (blue, green, orange, red, pink, yellow or purple), custom favicon, six different Google Fonts,...

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd