El uso de fuentes, como diseñador web, queda bastante limitado por tener que usar las fuentes «tipo» que el usuario tiene instaladas en su máquina. No vamos a entrar en este artículo en scripts especiales para poder usar otras fuentes.
Ahora gracias a las CSS y cada vez más, el usuario podrá tener la opción de decidir el tipo de letra con el que quiere ver nuestra web.
Decidir el tamaño de letra es muy importante a la hora de diseñar nuestra web, sin embargo hay que ser conscientes de que un mismo tamaño de letra no se ve igual por ejemplo, en Windows que en Mac. En un Mac, la resolución por defecto es de 72 dpi, mientras que en Windows es 96 dpi.
Las fuentes pequeñas son mucho más difíciles de leer, por lo que no es nada conveniente usar una fuente pequeña para grandes textos, pero esto no supone tampoco que debamos usar tamaños enormes de fuente. Entonces ¿cómo saber el tamaño de fuente correcto?. Los últimos estudios de usabilidad, aconsejan que sea el propio usuario el que pueda elegir este tamaño de letra, esto lo podemos solucionar con una CSS específica, en la que en lugar de tamaños absolutos usaríamos porcentajes de tamaño.
Hoy en día con navegadores como el firefox existe la posibilidad de modificar este tamaño a nuestro gusto, independientemente de que en la CSS hayamos puesto valores absolutos o relativos, basta con usar las teclas CTRL+ +, CTRL+ – ó CTRL+ 0 para aumentar, disminuir o dejar el valor predeterminado, para poder manejar a nuestro gusto los valores que nos hagan más fácil la lectura. Aunque esto no es válido para Internet Explorer, ya que si usamos tamaños absolutos, el poner la fuente grande o pequeña, no tiene ningún efecto sobre la pantalla.
Tenemos que contar con un aspecto muy importante y es que con las nuevas tendencias de diseño, la fuente ha pasado de ser pequeña a ser en muchas webs de tamaño extravagante. Es decir, ahora las fuentes son mucho más grandes sobre todo en los titulares, con lo cual una vez más hago referencia a la lógica del diseñador, yo no usaría fuentes de menos de 12 px para textos, y de ahí para arriba siempre y cuando el diseño lo permita. De todos modos las recomendaciones son usar tamaños en porcentajes y no absolutas, aunque he de confesar que yo no suelo hacerlo, ya que me gusta tener el control del diseño, por lo que suelo utilizar para textos Arial a 12px y luego juego con los h1, h2,… dándoles tamaños mucho mayores.
Consejos de legibilidad de Jakob Nielsen:
- No usar tamaños de fuente absoluto en las CSS. Código de los tamaños de fuente en términos relativos, por lo general, utilizando como porcentajes del 120% para las fuentes más grandes y el 90% para las más pequeñas.
- Si la web va destinada a la tercera edad, usar un mínimo de 12 puntos de fuente.
- Si es posible, evitar texto gráfico, ya que no se puede modificar ni desde el explorador ni desde la CSS. Si tiene que usar las imágenes de texto, asegúrese de que el tamaño de la fuente es especialmente grande (por lo menos 12 puntos), y que utiliza colores de alto contraste.
- Maximizar el contraste de color entre el texto y el fondo.
A continuación, os dejo una tabla de equivalencias de tamaños de fuente que puede resultar de gran utilidad.
Pts | Px | Em |
16pt | 22px | 1.4em |
17pt | 23px | 1.45em |
18pt | 24px | 1.5em |
20pt | 26px | 1.6em |
22pt | 29px | 1.8em |
24pt | 32px | 2em |
26pt | 35px | 2.2em |
27pt | 36px | 2.25em |
28pt | 37px | 2.3em |
29pt | 38px | 2.35em |
30pt | 40px | 2.45em |
32pt | 42px | 2.55em |
34pt | 45px | 2.75em |
36pt | 48px | 3em |
Pts | Px | Em |
6pt | 8px | 0.5em |
7pt | 9px | 0.55em |
7.5pt | 10px | 0.625em |
8pt | 11px | 0.7em |
9pt | 12px | 0.75em |
10pt | 13px | 0.8em |
10.5pt | 14px | 0.875em |
11pt | 15px | 0.95em |
12pt | 16px | 1em |
13pt | 17px | 1.05em |
13.5pt | 18px | 1.125em |
14pt | 19px | 1.2em |
14.5pt | 20px | 1.25em |
15pt | 21px | 1.3em |
Un detalle sobre las tablas con las equivalencias de escalas las Pts a Px solo funcionan si la pantalla del ordenador está configurada a 72ppp si el usuario tiene otra configuración esas equivalencias no sirven, y la Em no se pueden usar esas equivalencias. Si se tiene un body con una fuente de 20px y en un parrafo dentro del body se pone 1.6em el texto resultante NO se verá como 20px tal y como indica esa table, sino que se verá como si tuviese 32px, ya que em es relativo al tamaño de letra «del ambiente» 1 = sin cambios, 1.5 = 150%, … etc.
buenos su espacio online es muy bueno, bon trabajo hay gustad mucho!:)
Adios
excusa mi horrible espanol!Sólo te falta una herramienta de traducción el resto tudo ok!
Pues habrá veces que no te quede más remedio que hakear la CSS para otros exploradores, si quieres más info, lee este post http://gloobs.wordpress.com/2008/10/01/hacks-css/
Muy buenas las recomendaciones, pero en las diferentes versiones de internet explorer las fuentes varian un poco, entonces como debo de varias los CSS para mantener un aspecto uniforme en internet explorer?