Tipografía CSS: como usar web safe fonts y tipografías personalizadas.

Tipografía CSS: como usar web safe fonts y tipografías personalizadas.

Print Friendly, PDF & Email
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
5 (100%) 1 voto

Hay gente que vive de crear y vender tipografías.

Incluso existen mercados de tipografías dónde puedes ir a comprarlas.

También los hay quienes son capaces de emocionarse tras los misterios del arte de la escritura digital y/o manuscrita. Y quienes como yo, no piensan sobre si una elección es adecuada o no hasta que alguien entendido le dice

«esta página no favorece la lectura».

«me marea leer esta entrada».

«esta tipografía no representa la cultura de la marca».

Una correcta elección es como la sal. Es capaz de dar un plato soso el mejor de los sabores del mundo.

En la publicación de hoy no vamos a hablar como se elige correctamente una tipografía sino como se debe hacer con CSS para que una página web pase a usarlas.

Diferencia entre la tipografías con serifa y sin serifa y para que se usan.

La clasificación de las tipografías es una cuestión no menor que dejo para los especialistas de la materia.

Es fundamental diferenciar las tipografías con serifa y sin serifa (sans-serif).

  • Las tipografías con serifa terminan en esquinas redondeadas.
  • Las tipografías sin serifa terminan en ángulos rectos.

También existen otras como las decorativas, las monospace y variantes. Pero lo mejor es irlas viendo poco a poco.

Imagen explicativa del concepto de serifa (serif) y sin serifa (sans-serif)

Recomendaciones de uso para web

  • Nunca uses más de 3 tipografías en una página web. Idealmente 1 o 2.
  • Para el contenido de tu web elige una tipografía sans-serif. Facilita la lectura.
  • Para los títulos puedes usar cualquiera de las dos. Si usas una tipografía distinta darás contraste y quedarán bien diferenciadas las cabeceras de los textos.

Uso de tipografías seguras

Las tipografías seguras se denominan de este modo porqué vienen instaladas de fábrica. En el ordenador o teléfono con el que estás leyendo ahora mismo.

Algunos nombres que te pueden sonar son Arial, Helvetica, «Times New Roman», Georgia, Palatino, Tahoma, Verdana, … son algunas de ellas.

No importa el navegador la página siempre se verán bien.

Son tipografías refugio para asegurar que un navegador web siempre sera capaz como mínimo de representar el contenido de un documento web.

Veamos como se declara en CSS con un ejemplo

declaracion css de una tipografía
Ejemplo de uso de web safe fonts en CSS

Para indicar el uso de una tipografía se usa la instrucción font-family.

A continuación se indican 1, 2 o tantas tipografías como se desee y separadas por comas («,»).

La idea es que si una tipografía no es encontrada el navegador coge la siguiente de la lista y así sucesivamente hasta llegar al final.

Fijaros que la imagen las dos últimas tipografías son los textos «serif» y «sans-serif«. No se trata de ninguna tipografía en concreto. Estamos indicando al navegador web «si has llegado hasta aquí coge cualquier tipografía que tengas pero que sea con serifa». Exactamente lo mismo para el caso «sans serif».

Un detalle importante a tener en cuenta es el uso de las comillas («»).

Cualquier tipografía que tenga 2 o más palabras se pone entre comillas. En el ejemplo observamos el caso de «Book Antiqua«.

Uso de tipografías personalizadas

Las tipografías personalizadas no vienen con tu ordenador.

Esto implica que para poder visualizar correctamente el documento web (tal y como lo pensó el diseñador) el visitante se deberá descargar también la tipografía.

El visitante no debe hacer nada, se hace automáticamente al renderizar la página.

La consecuencia directa es que las tipografías personalizadas impactan en un mayor tiempo de carga de la página.

Como desarrollador web deberás elegir entre estética y rapidez de carga. Al final se trata de conseguir un equilibrio adecuado.

Veamos como se declara con un ejemplo:

Como usar tipografías importadas con CSS
Como usar tipografías importadas con CSS

El uso de tipografías importadas es muy similar al de las que viene por defecto.

La parte de font-family es idéntica.

La única diferencia está en que hay que importar la tipografía.

Para importar la tipografía usamos la instruccion @font-face de CSS3.

Fijémonos que hay 2 parámetros a tener en cuenta: font-family y src.

Font-family será el nombre que nosotros le queramos dar. Puede ser cualquier nombre. Pon algo que te sea práctico… a mi me gusta que el nombre sea de una única palabra para que así a posteriori no me sea necesario el uso de la doble comilla. («»).

En src (source significa fuente o origen) debemos indicar la dirección relativa o absoluta del lugar dónde se encuentra alojada la tipografía. Típicamente nos la hemos descargado e instalado en una de las carpetas del directorio de carpetas de nuestra página web.

Fijaros que en el ejemplo yo no he puesto comillas simples ni dobles dentro de la url. No estás obligado a ponerlas pues son opcionales.

Las tipografías suelen tener varios formatos… algunos de los cuales no todos los ordenadores los entienden. Mi recomendación es que uses .otf y/o .ttf.

Lugares recomendados para encontrar tipografías personalizadas son:

Hola querido lector,

La sal es a la cocina lo que las tipografías son al mundo web.

Para la página que estás leyendo he modificado varias veces la tipografía y aún así sigo buscando una que sea adecuada.

Es algo que nunca me había preguntado… pero cuando te dedicas a este mundo le terminas dando la justa importancia que merece.

Nos leemos mañana, como siempre, con un nuevo contenido en el web.

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.