Una tipografía legible es fundamental para todo sitio, ya que si tenemos un buen contenido pero no se puede leer correctamente, es muy probable que nuestro visitante decida irse.
Tipografía: Estilos y tamaños
Habiendo dicho esto, lo recomendable para una lectura apropiada es tener una fuente clara (del tipo Serif o Sans Serif), tamaño grande, con interlineado amplio y un color de fondo que no canse la vista. Es conveniente emplear un tono claro y calmado para el fondo que no interrumpa la lectura.
#contenido {font: normal 14px Arial, Helvetica, sans serif; line-height: 140%; background-color: #FDFDF;}
Nociones básicas de estilos de fuentes
Las tres familias recomendadas para trabajar en nuestro contenido son: Serif, Sans Serif y Slab Serif.
Serif es el vocablo en inglés que define los adornos o remates adicionales en los extremos de las letras, y la denominación para una familia de tipografías que presentan esa clase de terminación. Además de su clara aplicación en los sitios web, las fuentes de este estilo han sido parte de innumerables libros, diarios y revistas.
-
Las siguientes son fuentes Serif muy utilizadas, y recomendadas para páginas web: Georgia, Garamond, Calluna, Museo
La familia Sans Serif recibe su nombre del francés, donde “sans” significa “sin”; sin remates. Es un estilo más moderno, con lineas simples; que también ha sido popularizado en el medio impreso y se ha extendido al formato digital.
Algunos ejemplares de esta familia son: Helvetica, Arial, Tahoma, Verdana, Lucida Sans, Droid Sans
Las fuentes de esta familia se caracterizan por adornos (serif) de apariencia cuadrada, o de bloque. El grosor de los trazos destina a las fuentes Slab Serif, generalmente, a encabezados de gran tamaño. Hay quienes las consideran una variante contemporánea de las Serif.
Las siguientes son ejemplares de esta familia: Rockwell, Courier, Museo Slab
Tamaño e interlineado
Tamaño de la fuente: Actualmente, en los sitios se esta empezando a adoptar tamaños de fuente grandes para el contenido. El estándar sería de 14px a 16px para obtener una lectura clara y que no canse a la vista en las diferentes resoluciones de pantalla.
#ejemplo {font-size: 16px;}
Interlineado: El interlineado es la distancia que tenemos entre una linea de texto y otra en nuestro párrafo.
Para seguir cumpliendo la premisa de claridad en nuestro sitio, debemos darle a nuestro texto un interlineado acorde al tamaño de la fuente. En el caso de que el texto tenga un tamaño de 14px el interlineado podría ser de 140%.
Para asignar nuestro interlineado en el css solo debemos colocar:
#ejemplo {line-height: 140%;}
¿Dónde puedo conseguir fuentes?
Actualmente si queremos colocar fuentes directamente en nuestro sitio tenemos dos opciones populares:
Google WebFonts : Google ofrece una gran variedad de fuentes en la que podremos encontrar un estilo que se adecue a nuestras necesidades.
Este servicio que ofrece Google es totalmente gratuito e inclusive podremos añadir las fuentes que queramos a nuestra colección para luego descargarlas.
FontSquirrel : este sitio más que nada ofrece descargas de hermosas fuentes profesionales y absolutamente gratuitas para poder utilizar en nuestros diseños.
También cuenta con un servicio para crear “Font-face” kits que nos servirá para colocar fuentes personalizadas en nuestro sitio.