Crea tu web, tutor html, css

Tipografia del texto

El tipo de letra que usa el navegador por defecto puede ir de acuerdo a nuestro diseño o puede que no, por eso lo ideal es poder controlar este factor. El tipo de letra en CSS viene esepcificado por la propiedad font-family.

La fuente usada en nuestra página debe estar disponible para el navegador, lo más rápido para esto sería usar las fuentes estándard del sistema del usuario. Pero actualmente la velocidad de la red y la mejora de seguridad en los navegadores permite que podamos suministrar la fuente que queramos como un elemento más de la página, con lo que es posible utilizar un amplísimo número de fuentes y lograr que el usuario vea la página web como nosotros la diseñamos.

Podemos usar fuentes alojadas en nuestro servidor o fuentes externas alojadas en servidor que nos permita enlazarlas. Este tipo de servidores se denominan CDN y pueden servir gran cantidad de recursos a las páginas web. Un CDN muy utilizado para tipos de letra es el de Google (fonts.google.com). Existe otro muy socorrido para caracteres tipo icono es el de Awesome.

En la definición de estilo es donde se dclara de donde coger las fuentes usdas en la página. Para adjuntar funetes externas a nuestra página web se puede:

  • Enlazar en la sección head de la página web como un archivo de estilos
  • Importar dsde dentro de un archivo de estilos con la regla de importación @import
  • Utilizar un archivo de definición de la fuente (archivo .woff) usando la regla @font-face

/*sección HEAD de la página
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

/*En una archivo CSS con la url del cdn de google*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
/*o también */
@import 'https://fonts.googleapis.com/css?family=Noto+Sans&display=swap';

/*En un archivo CSS con un archivo de definición de la fuente*/
@font-face
{
font-family: miBrodway;
src: url(/images/broadway.woff);
}

Los archivos de definición de fuentes de letras admitido por todos los navegadores es el formato WOFF. Existen utilidades para convertir desde el habitual ttf a este nuevo formato compatible. S si quieres un jardín de formatos acude a Fonts Squirrel un punto de referencia para tipos de letra.

Los CDN son centros de recursos para utilizar en las páginas web

Pueden contener hojas de estilos, scripts, imágenes...

Estilos de las fuentes

Las fuentes tipográficas determinan la forma de los caracteres del texto, pero además existen otras fuentas que contienen iconos, que se pueden utilizar exactamente igual que las letras y a los que también se les puede aplicar estilos como colores, negrita o tamaños.

Los estilos que definen la tipografía del texto en nuestras página web:

Propiedad Uso Valor
font Forma resumida de todas las propiedades uno para cada propiedad
font-family Nombre de las familias tipográficas Texto
font-size Tamaño del texto valor numérico
font-style Enfatizado del texto italic, oblique, normal
font-variant Versalitas: mayúsculas pequeñas normal, small-caps
font-weight Grosor de los caracteres bold, (bolder, lighter, número)

Poca explicación requieren estas propiedades, pero nos dentendremos en las menos evidentes. Versalitas es el efecto de convertir todas las letras en mayúculas pero conservando el tamaño de la minúsculas. No es escribir en MAYÚSCULAS son pequeñas mayúsculas ¿lo ves?.

El font-weight, literalmetne peso de los caracteres se usa para escribir en negrita. En algunas fuentes admite valores numéricos entre 100 y 900 (de 100 en 100 ), además de bolder (mas gruesa que nomral), lighter (más ligera que normal) y bold (negrita). En la práctica la mayoría de las fuentes solo incluyen bold (equivalente a 700) o normal (600).

En la propuiedad font-family se pueden especificar varias fuentes por orden de preferencia. Si la primera no existe el navegador usa la segunda sino la tercera, y si no existe ninguna pues utiliza su fuente por defecto. Esta propiedad suele terminarse con fuentes genéricas como seriff, sans-seriff o monotype, para que el navegador elija un tipo de entre estos

En cuanto al font-style existen fuentes que distinguen entre cursiva (italic) y oclicuas (oblique), aunque en las más habituales no verás diferencia entre ellos porque si una fuente no dispone de uno de ellos se usa el otro.

Hasta aquí todas estas propiedades se refieren a las llamadas fuentes estáticas, que contienen difererentes deficnions de cada crácter para cada variante como negrita o cursiva. Actualmente existe la opción de las fuentes variables, quepermiten un control exhaustivo de cada carácter: tamaños, inclinaciones, grosor... La tipografía llevada a la web.

El tipo de texto que uses en las páginas debe adaptarse también al contexto. No es lo mismo un titular que un texto para lectura o un panel de aviso.