Navegabilidad – Tipografía e íconos

Para completar esta sección veremos dos temas sencillos y útiles para mejorar nuestro diseño: la
tipografía y los íconos.

Bootsrapt realizó cambios importantes entre la versión 3 y la actual. En la versión 3, disponíamos

una tipografía por defecto que, por supuesto, podíamos modificar pero en esta nueva versión
adoptaron un enfoque mucho mejor. Decidieron utilizar la tipografía nativa. Esto es, que la
tipografía por defecto depende del dispositivo y sistema operativo en que se esté visualizando el
sitio. El cambio de tipografía es totalmente automático sin necesidad de que cambiemos nada. Si
necesitamos más control en la tipografía, Bootstrap dispone una librería para ajustes de tipos. El
tamaño de la fuente se ajusta automáticamente en base al font-size default del browser. Todos los
elementos básicos se adaptan con la tipografía por defecto para que luzcan realmente muy bien y
consistentemente. No vamos a repasar cada uno de los elementos ahora, sino que los dejaremos
para los ejercicios y veremos en detalle los componentes más complejos.

Con respecto a los íconos, anteriormente Bootstrap disponía de una librería de íconos por defecto.
Ahora no incluyen ninguna pero sugieren varias. Las preferidas y probadas son: iconic y octicons. Lo
más importante de la librería de íconos a incluir es que tenga las imágenes vectorizadas,
preferentemente en formato SVG. Esto nos garantiza que, ante el cambio de tamaño de las
pantallas, no se vean pixeladas las imágenes ante su adaptación.

Si vamos al sitio useiconic.com veremos que es muy sencillo su uso, es más, tienen una hoja de
estilos preparada para integrar con bootstrap sin esfuerzo alguno.

Una vez incluída la librería, acá vemos cómo sería su uso:

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

icon-name se reemplaza por el nombre del ícono que nos interese utilizar. En la misma web puedes
consultar la enorme cantidad que tenemos a disposición.

¿Para qué utilizar íconos? Sabemos que las imágenes son asociadas a acciones de forma más rápida
que la lectura de un texto, como puede ser un teléfono, un email o los logos de las redes social. Por
lo tanto, utilizaremos los íconos para resaltar alguna acción importante o para destacar algún
elemento en particular. Es importante encontrar un justo balance en su uso, ya que sino, puede
quedar muy cargada nuestra página y eso se vería bastante grotesco.

Pasemos a la acción y apliquemos estos conceptos a nuestro sitio de pruebas.