Morton 20 de mayo de 2011 a las 08.01
   Imprimir artículo
elWebmaster.com

CSS3: C├│mo definir el tama├▒o de fuente con unidades rem


css3wide1Determinar la mejor unidad de medida para dar tama├▒o a nuestro texto es tema autom├ítico de debate, incluso hoy en d├şa. A├║n no existe un acuerdo, pero hay dos t├ęcnicas que son las m├ís usadas. Te presentamos una tercera.

Fuente original del art├şculo: Snook.ca
Traducci├│n realizada por
elWebmaster.com

Cuando decimos las dos más usadas, estamos hablando de:
1) Tama├▒o con px
2) Tama├▒o con em

CSS3 introduce la unidad rem, que proviene de la frase “root em“. Aqu├ş veremos c├│mo funciona.

La unidad em es relativa al tama├▒o padre, lo que provoca varios inconvenientes. La unidad rem es relativa al elemento raiz. Eso significa que puedes definir un simple tama├▒o de fuente en el elemento html y definir todas las unidades rem para que sean porcentuales.

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

En este ejemplo, definiremos un tama├▒o de fuente base del 62.5% para tener la conveniencia de ajustar el tama├▒o en rems de manera similar a utilizar px.

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

El soporte en navegadores es sorprendentemente amplio: Safari 5, Chrome, Firefox 3.6 o más actual, e incluso Internet Explorer 9.

Para los otros navegadores, deberemos usar un respaldo en px, si no te importa que los usuarios de viejas versiones de Internet Explorer aun sean incapaces de redefinir el tama├▒o del texto. Para hacerlo, primero deberemos definir el tama├▒o de fuente usando unidades px y luego definirlo de nuevo usando unidades rem.

Y con esto, tendremos un consistente y predecible redimensionamiento en todos los navegadores, y un texto redimensionable en las versiones más actuales de los principales navegadores.

Fuente original del art├şculo: Snook.ca
Traducci├│n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Jon dice:

    Interesante informaci├│n, desconoc├şa la existencia de esta unidad de medida.
    Una m├ís para sumar a la lista, de todos modos os dejo un art├şculo donde se explican el resto de formas que faltan aqu├ş:

    http://elgranartista.wordpress.com/2010/11/17/tamanos-de-fuente-en-css-tamanos-relativos-tamanos-fijos-diferencia-entre-px-y-em-y-ventajas-de-accesibilidad/

  2. jose angel lamas rodriguez dice:

    oh, que bien pero en firefox 4 no se ve es otro de los navegadores mas actuales que hay

  3. Adrián dice:

    Tampoco conoc├şa esa unidad de medida, es interesante, pero es doble trabajo a la hora de la compatibilidad, mas que nada si estamos trabajando en un proyecto que requiera demasiado css.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder