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 en una regla CSS
Aquí tienes los códigos para cada caso, recuerda el primero va en la sección head de la página los otros necesitan usar definiciones de estilos (sección style o archivo CSS)
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
@import 'https://fonts.googleapis.com/css?family=Noto+Sans&display=swap';
@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.