css - font - Conversión de Ems a píxel: ¿por qué 62.5% y no 6.25%?
font style css (8)
Sé que muchos de nosotros estamos familiarizados con establecer el 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 eso establecerlo en 6.25% equivaldría a 1em = 1px? Parece una conversión aún más simple en lugar de tener que lidiar con decimales ...
¡Gracias chicos! Soy bastante consciente de ellos y su historial (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 el tipo rendirí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 el tamaño de la 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.
Discutiblemente, pero luego pierdes el control sobre tu báscula. No olvide que los títulos heredarán esos mismos tamaños en proporción a su rango (es decir, <h1> será más grande, <h2> poco más pequeño). Si desea disminuir esos elementos, necesitará usar valores em con muchos marcadores de posición decimales. Imagine <h4> font-size: 0.005em .
O, lo que es peor, si desea que las fuentes tengan una escala mayor, es posible que esté buscando 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.
En primer lugar, no suponga que 1 em será igual a 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 font-size cuerpo base. Siempre uso un font-size de font-size del 76% según la tipografía Sane CSS de Owen Briggs .
Por último, para responder a su pregunta, sí, podría usar un tamaño de fuente de 6.25% y luego usar 12em lugar de 1.2em , por ejemplo. Sin embargo, desalentaría mucho esta metodología. En el mundo de la typograhy, se pretende que una de ellas tenga el ancho de la letra mayúscula ''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.
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.
Todo el asunto "62.5% = 10px" está fundamentalmente roto de todos modos: 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 letra: 62.5% en su CSS fundamentalmente no entiende cómo diseñar para la web.
Puede encontrar esto ú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.
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.
Gran pregunta
Veo el 6.25% como una propuesta interesante para el diseño web adaptativo / receptivo y las plantillas elásticas .
En particular, el tamaño de fuente con unidades rem se presta a su argumento ... una proporción 1: 1 es simplemente más fácil .
rem : "raíz em" ... el tamaño de fuente del elemento raíz. http://www.w3.org/TR/css3-values/
Vea este ejemplo rem de: 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 tu 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 de JSBin: Prueba de unidades "rem" de CSS3 para contenido elástico
Una proporción 1: 1 em a px debería conducir a menos errores tipográficos.
Notas de REM: Con los restablecimientos de CSS correctos y el body declarando el font-size base tanto en px como en rem sus estilos se degradan con elegancia ... Si rem es compatible, y se declara después de px , se aplica su valor. De lo contrario, el navegador retrocede a px .
Determinación de soporte (especialmente en dispositivos móviles) para rem . Acceda a esta página con todos los navegadores / dispositivos que pueda ... http://ahedg.es/w/rem.html
Traté de hacer lo mismo, pero me topé con el problema del uso de rems para márgenes y rellenos. Establecer font-size en 62.5% evita estos problemas.
Por ejemplo, el siguiente CSS
html {
font-size: 6.25% /* 16px * .0625 => 1px */
}
p {
font-size: 1rem;
margin: 1rem;
}
se presenta 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 usa font-size: 62.5% por otro lado, las cosas se procesan como se espera:
html {
font-size: 62.5% /* 16px * .625 => 10px */
}
p {
font-size: .1rem;
margin: .1rem;
}
se presenta como:
p {
font-size: 1px;
margin: 1px;
}