html - letra - Tamaño de fuente CSS: valores relativos vs. absolutos. ¿Cuál usar?

tamaño de letra en css

Question

• ¿Cuál es la mejor forma de tamaño de texto en todos los navegadores?
• ¿Cuáles son las ventajas y desventajas de definir el tamaño de fuente en píxeles / em?

Answer 1

A List Apart hizo una extensa reseña sobre cómo funcionan los tamaños de letra en varios navegadores. Resulta ser más complicado de lo que esperabas, al igual que todo lo demás en CSS. El consenso parece inclinarse hacia el uso de ems, ya que eso le da al usuario más control sobre el ajuste del tamaño de la fuente en el navegador.

Answer 2

El uso de escalado EM es más versátil con las fuentes. También es más accesible.

Si no ha trabajado con esto antes, una herramienta como Em Calculator puede ser muy útil para entender cómo funciona la etiqueta / modelo.

Answer 3

El uso de tamaños relativos hará que su página se vea mejor en dispositivos móviles, como el iPhone, especialmente dado que renderizan la página en una ventana gráfica más grande y luego la reducen para que quepa en el espacio necesario.

Answer 4

Los píxeles son de tamaño fijo. Esto significa que cuando se ve en cualquier pantalla y resolución, el texto siempre tendrá el mismo tamaño.

Los Em son escalables, lo que significa que las personas con diferentes tamaños de pantalla y resoluciones generalmente pueden obtener una mejor experiencia.

Algunos navegadores tienen problemas para alterar el tamaño de los tipos de tamaño de letra fijo (px y pt) y, por lo tanto, tienden a no ser muy buenos para la fuente web, ya que algunos usuarios pueden necesitar aumentar el tamaño de la fuente usando una lupa o simplemente la rueda del mouse. .

Los tamaños de letra relativos tienen la costumbre de irritar a los diseñadores ignorantes que se irritan porque el sitio web no se corresponde exactamente con sus diseños.

En mi opinión, apaciguar a los diseñadores que deberían saber mejor no es razón suficiente para utilizar fuentes fijas en el desarrollo web.

Answer 5

Mantengo el tamaño de fuente como el valor predeterminado elegido por el usuario, luego uso el tamaño relativo:

body {
    font-size: 100%;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.8em;
}

Este método respeta la elección del tamaño de fuente del usuario en su navegador, que generalmente se establece en 16 píxeles.

Answer 6

Personalmente, establecí un tamaño de fuente absoluto en el body y a partir de allí configuré todo como relativo a eso. p.ej:

body {
    font-size: 10px;    /* or pt if you want */
}
h1 {
    font-size: 200%;
}

Intente evitar combinar los tamaños relativos compuestos:

body {
    font-size: 10px;
}
p {
    font-size: 80%; /* 8px, right? */
}
div {
    font-size: 150%;
}
/* what size is a "div > p" ? */

Todos los navegadores modernos tienen zoom de página completa en estos días, lo que significa que incluso el tamaño de la fuente en píxeles está bien.

El beneficio de este método es que puede modificar fácilmente el tamaño de todo el texto al cambiar una definición.

El inconveniente es que si desea cambiar el tamaño de fuente predeterminado, pero no los encabezados (por ejemplo), entonces habría muchas declaraciones para cambiar.

Answer 7

Prefiero los valores relativos ya que Internet Explorer (<7?) No puede escalar valores absolutos o en píxeles.

Answer 8

Si usa tamaños absolutos, a los lectores con impedimentos visuales les puede resultar difícil leer. Si usa tamaños relativos, simplemente está especificando qué texto es más grande o más pequeño que otro texto en su página, todo en relación con el tamaño de texto predeterminado del usuario, que puede ser grande (si está deteriorado) o minúsculo (si es un poco extraño).

Una desventaja del texto de tamaño relativo es cuando desea que su sitio web tenga tamaños fijos, pero de ser posible, debería ir con un diseño más fluido de todos modos para que la página cambie de tamaño para acomodar su contenido.

Answer 9

Una cosa que he visto usar es definir un tamaño de fuente base en el CSS del cuerpo (p. Ej., 12pt) y luego todos los demás tamaños de fuente son porcentajes de eso (por ejemplo, 140% para títulos, 80% para pequeños, etc.).

Si usa pt, tendrá diferencias en la visualización en función del DPI establecido por el usuario, pero estará bajo el control del usuario, tal vez.

Si usas px entonces tendrás problemas en dispositivos DPI muy altos.

Em y pt son buenos para CSS para imprimir.

Hay mucho que hacer y ver qué pasa con las fuentes y CSS.

Answer 10

La mayoría de mi experiencia en programación son aplicaciones de escritorio, pero he estado leyendo una buena cantidad de desarrollo web recientemente, y los libros que he encontrado sugieren utilizar una especificación de tamaño de letra de palabra clave (pequeña, mediana, etc.) y luego ampliarla o aumentarla. abajo por porcentaje o em.

Si el tamaño de fuente se especifica en px, los usuarios de versiones anteriores de IE no podrán sobrescribir el tamaño del texto, es decir, no podrán hacerlo más grande o más pequeño para adaptarlo a sus preferencias.

Sin embargo, IE5 también plantea un problema cuando el tamaño de fuente se especifica mediante la palabra clave: en relación con otros navegadores, IE5 muestra el texto aproximadamente un paso más grande.

Answer 11

¿Cuál usar?

Ambos. Relativo para el texto del cuerpo principal que los usuarios van a tener que leer mucho (por lo que querrán poder leerlo cómodamente); Absoluto para texto que debe dimensionarse para coincidir con otros elementos de la página que están clasificados en píxeles, como las imágenes.

Por relativo, ''%'' y ''em'' son igualmente buenos.

Para absoluto, siempre use ''px''. Nunca use ''pt'' para su uso en pantalla, solo es sensato para imprimir hojas de estilo. Es una pena que ''pt'' se considere la unidad predeterminada para el manejo de fuentes porque en la web es la peor opción posible.

(ETA: tenga en cuenta que, desde esta respuesta, CSS3 ha redefinido las ''unidades físicas'' para que px y pt sean siempre proporcionales. Por lo tanto, este problema ya no importa a menos que le preocupen los navegadores muy antiguos).

A algunas personas no les gusta el efecto ''compuesto'' de los tamaños de fuente relativos. El truco, en realidad, es utilizar el menor número de cambios de tamaño de fuente posible, para evitar demasiados anidamientos. Debería ser posible obtener el comportamiento del tamaño preferido del usuario relativo sin el comportamiento de composición mediante el uso de las palabras clave de tamaño de fuente ''small'' / ''medium'' / ''xx-large'' / etc., Pero desafortunadamente de esa manera no obtiene mucha granularidad, y todavía existen diferencias hoy en día entre cómo los manejan los navegadores.

Answer 12

Si puede soltar el soporte para IE8 entonces sugiero usar unidades rem . Son unidades relativas como em pero no conectan en cascada a los elementos de los niños haciéndolos mucho más simples para trabajar con

em son complejos

p {
  font-size: 2.5em;
  span {
    font-size: 1.5 em;
    /* font size comes out to 3.75 root em*/
  }
}

rem son más simples

p {
  font-size: 2.5rem;
  span {
    font-size: 1.5 rem;
    /* font size comes out to 1.5 root em*/
  }
}