Conversión de Ems a píxel: ¿por qué 62.5% y no 6.25%?

Question

Sé que muchos de nosotros estamos familiarizados con la configuración del tamaño de fuente en el elemento del cuerpo en nuestro CSS al 62.5%. Esto significa que 1em igualará 10px y ayudará a mantener el píxel perfecto pero también permite escalar las fuentes.

Entonces, ¿no significaría que establecerlo en 6.25% equivaldría a 1em = 1px? Parece que una conversión aún más simple en lugar de tener que meterse con decimales ...

---

Gracias chicos! Soy bastante consciente de ellos y es historia (grado de diseño), pero estoy seguro de que otros pueden encontrarlo útil :)

En cuanto al 1em = 1px, no veo cómo esto es indeseable. El em es cuadrado, independientemente de sus unidades (ya sean puntos o píxeles) y nadie establecería su tipo a 1px (al igual que nadie configuraría el tipo impreso a 1pt). Además, incluso su artículo reconoce que en la mayoría de las tipografías digitales, la "M" mayúscula suele ser menor que 1em, y que el em es simplemente un reflejo del tamaño del punto (tipo 48pt representaría un cuadrado de 48pt por 48pt para el em, 12pt tipo produciría 12x12, etc.)

Además, la razón por la que la gente haría esto sería más para establecer las dimensiones de otros elementos en la página para que todo se adapte bien cuando el usuario ajusta su tamaño de fuente. Claro, siempre habrá pocos que establezcan sus valores predeterminados a algo más que 16px, pero vale la pena el precio a pagar por un diseño perfecto de píxeles que se adapta bien.

Answer 1

Posiblemente, pero luego pierde el control sobre su báscula. No olvide que los títulos heredarán esos mismos tamaños en proporción a su rango (es decir, <h1> será el más grande, <h2> ligeramente más pequeño). Si desea disminuir esos elementos, necesitará usar valores em con muchos marcadores de posición decimales. Imagina <h4> font-size: 0.005em.

O peor, si quiere ampliar las fuentes, podría estar mirando font-size: 40em o algo ridículo.

En resumen, 1em = 10px es mucho más práctico para los valores escalados de las fuentes. Si bien una escala 1: 1 puede tener sentido en el papel, no se presta tan bien a CSS sensible y sostenible.

Answer 2

La conversión puede ser más simple, pero una em no significaría lo que se supone que significa.

Se supone que 1em es igual al ancho si una "M" en mayúscula en una fuente dada. Si el ancho de la letra M es 1 píxel, su fuente será ilegible.

http://en.wikipedia.org/wiki/Em_(typography)

Answer 3

En primer lugar, no asuma que em 1 será igual al 10 píxeles. Una unidad em está en correlación directa con la tipografía que se usa. Si alguien tiene un tamaño de fuente de 16 píxeles, entonces el 62.5% es de hecho 10 píxeles (16 * 0.625 = 10) pero esto obviamente cambiará cuando alguien haya modificado su tamaño de fuente predeterminado.

En segundo lugar, esta es la primera vez que conozco el uso del 62.5% para el cuerpo base font-size. Siempre uso un font-size del 76% según Sane CSS Typography by Owen Briggs.

Por último, para responder a su pregunta, sí, podría utilizar un tamaño de fuente de 6.25% y luego usar 12em en lugar de 1.2em, por ejemplo. Sin embargo, desalentaría mucho esta metodología. En el mundo de la typograhy, una em está destinada a ser the width of the capital letter 'M'.Este método infringe por completo esa práctica común y confundirá seriamente a cualquier persona que pueda mantener su CSS en el futuro.

Answer 4

Todo el elemento "62.5% = 10px" está roto de todos modos, el 62.5% puede o no ser 10px dependiendo del navegador, la configuración del usuario y, especialmente, la configuración del tamaño mínimo de fuente. Entonces no puedes simplemente diseñar en píxeles y luego "convertir" a ems suponiendo que 62.5% = 10px, porque tu diseño se romperá todo el tiempo. Si desea un diseño perfecto para píxeles, debe usar píxeles como unidad. Si desea un diseño flexible, debe pensar en las unidades apropiadas para diferentes elementos del sitio web: ems para elementos que deberían escalar en relación con el tamaño del texto, porcentajes para elementos que deberían escalar en relación con el tamaño de ventana y píxeles para elementos (como imágenes) que no deberían escalar en absoluto.

Cualquiera que incluya tamaño de fuente: 62.5% en su CSS fundamentalmente no entiende cómo diseñar para la web.

Answer 5

Puede que le resulte útil también. http://pixel2em.kleptomac.com Esto proporciona un convertidor en línea de píxel a em y también puede hacer una conversión completa de archivos CSS.

Answer 6

Hay una versión actualizada disponible en http://pixelconverter.kleptomac.com Es un convertidor de unidades en línea para convertir píxeles, puntos, em, porcentajes. Esto admite la conversión de/a cualquiera de estas unidades.

Answer 7

Gran pregunta.

veo 6,25% como una propuesta interesante para el diseño adaptativo /sensible web y elástica plantillas.

En particular, el tamaño de fuente con rem unidad se presta a su argumento ... una proporción 1: 1 es sólo más fácil.

rem: "em raíz" ... el tamaño de fuente del elemento raíz. http://www.w3.org/TR/css3-values/

Vea este ejemplo de rem: http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

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

Y ahora con su sugerencia ...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */ 
body { font-size: 14px; font-size: 14rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 24rem; } /* =24px */ 

... Juega con mi ejemplo JSBin: Testing CSS3 "rem" Units for Elastic Content

Una proporción 1: 1 de em a px debería conducir a l ess typos.

Notas REM: Con restablece CSS adecuadas y body declarando la base font-size en ambos pxrem y sus estilos se degradan con gracia ... Si rem está soportado, y declaró después de px, que es el valor se aplica. De lo contrario, el navegador vuelve al px.

Soporte de determinación (especialmente en el móvil) para rem. Por favor, acceda a esta página con cualquiera/todos los navegadores/dispositivos que pueda ...http://ahedg.es/w/rem.html

Answer 8

Traté de hacer lo mismo, pero me encontré con el problema del uso de rems para márgenes y rellenos. Establecer font-size a 62.5% evita estos problemas.

Por ejemplo, el siguiente CSS

html { 
    font-size: 6.25% /* 16px * .0625 => 1px */ 
} 

p { 
    font-size: 1rem; 
    margin: 1rem; 
} 

renders como:

p { 
    font-size: 1px; 
    margin: 9px; /* WTF?! */ 
} 

extraño, ¿verdad? Supongo que esto es causado por algún conflicto extraño con tamaños mínimos de fuente.

---

Ahora, si se utiliza font-size: 62.5% por el contrario, las cosas hacen que como era de esperar:

html { 
    font-size: 62.5% /* 16px * .625 => 10px */ 
} 

p { 
    font-size: .1rem; 
    margin: .1rem; 
} 

renders como:

p { 
    font-size: 1px; 
    margin: 1px; 
}