Font sizing with rem –

Jonathan Snook

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It’s just a matter of which less-desirable is most desirable.

Sizing with rem

CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

I’m defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)

What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

vía Font sizing with rem –

Check My Colours – Analyse the color contrast of your web pages

Check My Colours is a free-to-use web application for analyzing the color contrasts used on a web page.

It is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.
All the tests are based on the algorithms suggested by the World Wide Web Consortium (W3C).

Check My Colours

Once a URL is submitted, it lists all the elements + their contrast levels and marks any problematic elements. Also, it allows us to play with their colors online to find the right color.

P.S. The tests ran are based on the algorithms suggested by W3C

Check My Colours – Analyse the color contrast of your web pages.

Auditar la accesibilidad de una home en nueve pasos

En este artículo nuestro amigo Torres Burriel nos explica los 9 pasos a seguir para validar nuestra página web con los Estándares de Accesivilidad. 

Cita textualmente:
" Esta lista no pretende ser un extenso modelo de comprobación de la accesibilidad de una home, pero sí un punto de partida para aquellas personas que quieren empezar a preocuparse por ésta." 

Un buen recurso para seguir los Estandares Web de Accesibilidad.