La pila de fuentes del sistema o System Font Stack
Con el fin de evitar posibles sorpresas en equipos que no posean un determinado tipo de fuente (cuyo caso utilizarían una del sistema), se propone el uso de la pila de fuentes, tal y como se detalla en esta entrada System Font Stack de CSS-Tricks.
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
Existiría un método alternativo utilizando @font-face
/* Se definen los tipos de fuente del sistema */
@font-face {
font-family: system-ui;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
/* Y posteriormente se aplica el estilo seleccionado. */
body {
font-family: "system-ui";
}
Librerías de fuentes online
Una mejor alternativa, según el caso, sería utilizar tipos de fuente de librerías online como Google Fonts o Font Library
/* Enlazamos el tipo de fuente */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
/* o la importamos mediante @import */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Posteriormente podemos utilizarla de forma normal */
body {
font-family: 'Roboto', sans-serif;
}
Puede ser interesante añadir una fuente de backup o fallback font, para el supuesto de que pudiera haber algún problema con el proveedor de la fuente.
Fuentes descargadas o downloaded fonts
Por último, la posibilidad de descargar la fuente y hacer referencia al archivo de la misma:
@font-face {
font-family: my-cool-font;
src: url(../fonts/the-font-file.woff);
}
h1 {
font-family: my-cool-font, sans-serif;
}
Estilos de texto
Una vez establecido el tipo de fuente a emplear, podemos personalizar el formato mediante los siguientes parámetros:
font-style
Se recomienda uso de la etiqueta em en lugar de font-tyle cuando se quiere dar énfasis a un determinado texto.
font-style: normal|italic|oblique|initial|inherit;
h1 {
font-style: italic;
}
letter-spacing / line-height
Permiten modificar el espacio entre letras o entre líneas respectivamente
See the Pen
Texto by Juanjo Carballo (@crivinoiax)
on CodePen.
Otras propiedades
text-transform
Permite convertir textos a mayúsculas, minúsculas o capitalizar primeras letras, más información en text-transform – CSS | MDN (mozilla.org)
text-shadow – ellipsis
Permite sombrear los textos, más información en text-shadow – CSS | MDN (mozilla.org)
ellipsis permite ocultar una parte del texto consiguiendo un efecto interesante en combinación con otros parámetros, información detallada en Truncate String with Ellipsis | CSS-Tricks – CSS-Tricks
See the Pen
Shadow – ellipsis by Juanjo Carballo (@crivinoiax)
on CodePen.