Tamaño de la tipografía en Chrome

Desde hace algún tiempo vengo observando que Chrome renderiza la tipografía básica de la web ligeramente más grande que Firefox cuando el tamaño de especifica con medidas relativas em. Tengo que reconocer que estoy usando Chrome como navegador por defecto desde comienzos año, y ha sido entonces cuando he podido comprobar que ciertas páginas rompían su layout a consecuencia de este problema.

A continuación podéis ver dos capturas de pantalla de una misma página web, realizadas con UploadScreenshot en Chrome 10.0.648.205 y Firefox 3.6.16, ambos sobre Ubuntu 9.

Captura de pantalla realizada en Chrome

Captura de pantalla realizada en Firefox

Las propiedades CSS de la hoja de estilos aplicada al párrafo en cuestión son:

font-size: 0.9em; /* aplicada explícitamente al párrafo */
font: 10pt Arial,Helvetica,sans-serif /* heredada desde body */

Usando la herramienta para desarrolladores que incorpora Chrome podemos ver los estilos que realmente se están aplicando al párrafo. Se han eliminado algunas propiedades que nada tienen que ver:

color: #555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
text-align: left;
vertical-align: baseline;

Usando el plugin Firebug en Firefox se comprueba que las propiedades que se aplican realmente son:

font-family: Arial,Helvetica,sans-serif
font-size: 12px
font-weight: 400
font-style: normal
color: #555555
text-transform: none
text-decoration: none
letter-spacing: normal
word-spacing: 0
line-height: 16px
text-align: left
vertical-align: baseline
white-space: normal

Está claro que algo se me tiene que estar pasando, pero parece que a otros también porque cuando Javier Cañada me dio a conocer filmin pude comprobar como el layout tenía problemas en Chrome. Y digo problemas porque había textos que dejaban de leerse al quedar ocultados por otros elementos.

¿Alguna idea? Yo mientras tanto prometo seguir investigando.

10 thoughts on “Tamaño de la tipografía en Chrome

  1. Hola, buenas:

    En ambos casos la configuración está por defecto. Si estando por defecto, hubiera diferencias, tendríamos un problema porque muchos usuarios tienen esos parámetros siempre por defecto.

    Si ves el valor que se aplica al tamaño de la fuente en ambos casos es 12px.

    Un saludo

  2. Creo que debe haber alguna otra cosa implicada, porque he creado un fichero de ejemplo y no he notado diferencias apreciables (sí que hay alguna ligera diferencia en cuanto al kerning, pero es mínima y hasta “esperable”). Yo he utilizado Firefox 3.6 y Chrome 10.0 en OSX.

    https://gist.github.com/938545

    Una práctica que ya está muy extendida cuando quieres que no haya ninguna diferencia entre browsers es hacer un CSS reset de forma que elimines los estilos predefinidos en cada navegador.

    Esto se incluye en todas las plantillas html5 que he visto (que, además, hacen un buen esfuerzo por corregir el funcionamiento de IE). Por ejemplo: http://initializr.com/

Leave a Reply

Your email address will not be published. Required fields are marked *