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.
Valora esta entrada
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.

Entradas relacionadas:

Colores CSS para web
- 626
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Como mezclar CSS y HTML. Acoplamiento CSS
- 300
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Selectores CSS. Que son y como usarlos
- 237
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Pseudo Clases :link, :active, :hover y :visited
- 111
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 252
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Dimensiones reales de una caja en CSS
- 204
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Introducción al CSS. Que significa Cascading Style Sheets.
- 209
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Como centrar un texto mediante CSS y no con HTML
- 567
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 241
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Ejemplo de centrado vertical y horizontal con CSS
- 114
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.