Tipografía
La mayoría de lo que la gente lee en la web es texto, y la mayor parte de la sensación que transmite una página proviene de cómo se configura ese texto. Cambia la tipografía, ajusta el espaciado entre líneas, limita la longitud de línea, y el mismo párrafo pasa de ser apretado y desagradable a ser tranquilo y legible. Nada de eso es decoración. Es tipografía, el puñado de propiedades CSS que deciden lo cómodo que es leer tus palabras, y este capítulo es el recorrido por las que usas a diario.
Elegir una tipografía
La propiedad que elige tu fuente es font-family, y le das no una sola fuente sino una lista. Esta lista es la pila de fuentes: el navegador intenta la primera fuente, y si no está disponible retrocede a la siguiente, y así sucesivamente por toda la línea.
body {
font-family: "Helvetica Neue", Arial, sans-serif; /* intenta Helvetica, luego Arial, luego cualquier sans-serif */
}El último nombre siempre debe ser una familia genérica como sans-serif o serif. Esa es tu red de seguridad: si ninguna de las fuentes nombradas está en el dispositivo del lector, el navegador aún muestra algo sensato en lugar de un predeterminado que no elegiste. Los nombres de fuente con espacios van entre comillas; los nombres de una sola palabra no las necesitan.
font-family toma una lista, no una sola fuente, y el navegador usa la primera que pueda encontrar. Siempre termina la lista con una familia genérica como sans-serif para que haya un respaldo seguro. Envuelve cualquier nombre de fuente con espacios en comillas. Dimensionamiento de texto
Estableces el tamaño del texto con font-size. Puedes darle un valor en píxeles, pero el tamaño que debes alcanzar es el rem, una unidad vinculada al tamaño de fuente base de la página. Una rem es igual al tamaño de texto predeterminado del navegador, que suele ser 16px, por lo que 1rem es un tamaño de lectura normal y 1.25rem es un poco más grande.
body {
font-size: 1rem; /* el tamaño de lectura base, generalmente 16px */
}
h1 {
font-size: 2rem; /* el doble del tamaño base */
}font-size establece qué tan grande es el texto, y rem es la unidad a alcanzar. Una rem es el tamaño de texto normal del navegador, por lo que 1rem es regular y 2rem es el doble de grande. Evita dimensionar el cuerpo de texto en px, que es en lo que profundizan los siguientes niveles. Peso y estilo
Dos propiedades cambian la forma de tus letras. font-weight controla qué tan negrita es el texto, y font-style enciende cursiva.
strong {
font-weight: bold; /* trazos más pesados, más gruesos */
}
em {
font-style: italic; /* inclinado */
}bold y normal son las palabras clave de peso de uso diario. Para cursiva, italic inclina el texto y normal lo mantiene vertical.
font-weight hace el texto más negrita o más ligero, y font-style: italic lo inclina. Las palabras clave bold y normal cubren la mayoría de lo que necesitas a diario. Usa cursiva para énfasis, no para párrafos completos, que se vuelven difíciles de leer. Espaciado que hace que el texto sea legible
El texto cómodo es principalmente sobre espacio. line-height controla el espacio entre líneas, y darle un poco de espacio hace que un párrafo sea mucho más fácil de leer.
p {
line-height: 1.5; /* una vez y media el tamaño de fuente */
}Usa un número simple como 1.5 sin unidad. Eso significa "una vez y media el tamaño de fuente", por lo que el espaciado crece en paso con el texto. Las líneas apretadas son una de las razones más comunes por las que una página se siente difícil de leer, y este único valor arregla la mayoría de ellas.
line-height establece el espacio entre líneas, y un valor de alrededor de 1.5 hace que el texto sea mucho más fácil de leer. Escríbelo como un número simple sin unidad para que el espaciado crezca con el texto. Las líneas apretadas son una razón principal por la que una página se siente difícil de leer, y esto arregla la mayoría. Alineación y decoración
Tres propiedades manejan la alineación y los toques finales. text-align mueve el texto a la izquierda, derecha o centro. text-transform cambia el caso, como hacer que el texto esté todo en mayúsculas. Y text-decoration añade o elimina líneas como subrayados.
h1 {
text-align: center; /* centra el título */
}
.button {
text-transform: uppercase; /* muestra como todo en mayúsculas */
text-decoration: none; /* elimina el subrayado del enlace */
}text-transform: uppercase muestra el texto en mayúsculas sin que tengas que reescribirlo, por lo que el contenido original permanece como palabras normales. Los subrayados se añaden o se eliminan con text-decoration.
text-align mueve el texto a la izquierda, derecha o centro, text-transform: uppercase lo muestra en mayúsculas, y text-decoration añade o elimina líneas como subrayados. El cambio a mayúsculas en CSS mantiene tu texto actual como palabras normales, para que nunca lo reescribas en mayúsculas. Alcanza text-decoration: none cuando quieras eliminar el subrayado de un enlace. La abreviatura font y la herencia
Las propiedades de fuente tienen un rasgo útil: se transmiten. Establece font-family en el <body> y cada párrafo, título y enlace adentro la hereda, por lo que raramente te repites.
body {
font-family: system-ui, sans-serif; /* todo adentro hereda esto */
line-height: 1.5;
}Debido a esto, la mayoría de tu tipografía vive en un lugar cerca de la parte superior de tu hoja de estilos, e elementos individuales solo anulan lo que necesitan diferir.
font-family en el <body> una vez y todo lo hereda. Eso mantiene tu tipografía en un lugar cerca de la parte superior de la hoja de estilos. Los elementos individuales solo anulan los bits que necesitan cambiar.