¿Sigue siendo válido el debate sobre em VS px VS% en tipografía?

8

He estado leyendo algunos artículos sobre por qué los em son mejores que px en tipografía. Y la base tiene que estar en%, lo mejor es incluso tenerbody{ font-size:62.5%; } .

Uno de los mejores artículos que pude encontrar se encuentra aquí: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Básicamente se dice que px no escala bien en sitios web y dispositivos. Siempre he hecho tipografía en px, y nunca he encontrado ningún problema. También he estado trabajando con algunos marcos CSS y algunos temas de WordPress, y siempre veo que solo se usa el px normal.

Ahora veo que la mayoría de los artículos están escritos en su mayoría desde hace algunos años, quería saber si todavía es cierto que px no escala bien, o ya no es un punto para los navegadores y dispositivos modernos. .

En otros comentarios. Incluso he leído y visto en algunos sitios que las personas incluso van tan lejos para hacer todo su estilo en em. Por ejemplo, el relleno y los márgenes se realizan en em.

¿Es esto necesario si quieres tener un buen sitio web de escala?

website-design typography Saif Bechan
fuente
2
Para hacer las cosas aún más confusas, la mayoría de los navegadores modernos admiten ems o rems relativos snook.ca/archives/html_and_css/font-size-with-rem .
Paulmorriss
Hay una respuesta más reciente y mejor en StackOverflow: stackoverflow.com/questions/11799236/…
Denis de Bernardy

Respuestas:

3

Mi respuesta, porque el texto en sí es un "no" definitivo. Los buenos navegadores engañan (como deberían) cuando se trata de escalar fuentes especificadas en unidades de píxeles. El desarrollador web debe ser independiente de cualquier diferencia en los dispositivos en los que el contenido representa.

Pruebe esto en w3Schools Tryit editor :

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Luego mantenga presionada la tecla Ctrl y desplácese con la rueda del mouse, o presione Ctrl-Numeric +. Todos deberían escalar de manera uniforme en un buen navegador.

No se garantiza que los píxeles tengan un ancho igual de alto, ni que la resolución siempre sea 96DPI, y las preferencias del usuario pueden aplicarse para aumentar o disminuir la escala de todo el contenido. Teniendo esto en cuenta, la mayoría de los navegadores tienen en cuenta estas diferencias de resolución y escalan la salida de acuerdo con el hardware / preferencias específicas. Si un navegador aplicara estrictamente las unidades de píxeles reales, el usuario final (o dispositivo de hardware en el que se ejecuta) estaría condenado a ser percibido como una falla por el usuario final.

Dicho esto, tenga en cuenta que HTML no está optimizado para escalar, sino para volver a fluir el texto al mayor rango posible de relación de aspecto de resolución (ancho dividido por alto). Los navegadores difieren en el margen y los márgenes de escala cuando se especifican en diferentes unidades. Para diseños verdaderamente escalables (por ejemplo, donde la posición en el fondo es importante) uno debería considerar usar un formato escalable y sin flujo, como SVG . ¡Hacer relleno y márgenes en porcentajes siempre es arriesgado!

Si está utilizando un fondo de imagen o similar, y desea que el margen o margen sea un número específico de píxeles hacia adentro, ¡mi consejo es asegurarse de especificar esos márgenes y margen en unidades de píxeles!

Louis Somers
fuente
1
Solo un punto de nota: la función "Tamaño de texto" en IE no escalará las fuentes que se arreglan explícitamente usando pto px.
Zhaph - Ben Duguid el