Hasta hace unos años la mayor parte del mundo conectado salía a Internet a través de un ordenador personal. Por ello bastaba con tener controladas las dos o tres resoluciones de pantalla más habituales para que una página o una aplicación web se comportaran de la manera esperada. Por aquel entonces las resoluciones más comunes eran: 800×600 (sí, increíble pero cierto, ahora ni los teléfonos tienen algo tan bajo), 1024×768 y si acaso 1280×1024 los afortunados que tenían monitores grandes.

Con la llegada del iPhone en 2007 y posteriormente del iPad en 2010, la cosa cambió para siempre. Actualmente debemos considerar diseños y distribuciones válidos para muchísimas resoluciones diferentes y la variedad es inmensa. La gente se conecta a través de móviles con diversas resoluciones y densidades de pantalla en sentido vertical u horizontal, tabletas que según su precio y prestaciones pueden variar mucho las dimensiones de visualización, ordenadores con pantallas 16:9 o monitores Full-HD, ordenadores de escritorio con resoluciones más convencionales… Una locura.

En el caso concreto de las páginas web hay que tratar de que nuestros contenidos y diseños se adapten sin problema a cualquier resolución, densidad y tamaño. Y dentro de esta problemática una cuestión importante es ofrecer en cada caso un tamaño de texto apropiado. No sirve tener un texto de tamaño muy grande en resoluciones pequeñas, ni uno muy pequeño en resoluciones grandes. En cada caso hay que encontrar un tamaño apropiado y utilizarlo.

¿Cómo podemos conseguirlo?

La mejor manera es utilizar dimensiones de carácter relativo en nuestros diseños web, y en concreto dos unidades especialmente pensadas para este problema: los "em" y los "rem".

…Continua…

Lee el post completo en JASoft.org: http://www.jasoft.org/Blog/post/CSS-Tamanos-relativos-de-fuente-segun-la-resolucion.aspx