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:

Resumen de como comentar código en html, css y javascript
- 318
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Diferencia entre visibility:hidden; y display:none;
- 35
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Ejemplo de centrado vertical y horizontal con CSS
- 53
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Colores CSS para web
- 299
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...
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 47
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Introducción al CSS. Que significa Cascading Style Sheets.
- 137
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.
La propiedad overflow
- 16
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Dimensiones reales de una caja en CSS
- 113
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.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 220
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Unidades de medida absolutas y relativas en CSS
- 167
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
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.