Si estás comenzando a aprender acerca del mundo del desarrollo web, probablemente ya hayas escuchado alguna cosa sobre CSS o incluso sepas algunos de sus conceptos más básicos. En este post, te mostraremos de forma general cómo funcionan las tipografías en CSS, cuál es su importancia y cómo puedes comenzar a aplicarlas en tu página.
En este punto, sabrás que el diseño y la presentación de tu página web es el punto principal de CSS; siendo así, la importancia de seleccionar una tipografía con las características adecuadas es fundamental para ofrecer al usuario la mejor experiencia posible al momento de visitar tu web.
Tipografías que debes conocer
Antes de poder programar las tipografías en CSS que estarás usando en tu página web, es importante que conozcas un poco sobre las familias de fuentes más conocidas y sus características. Con esto, vas a poder saber que fuente aplicar en tu página dependiendo del tipo de contenido así como de su extensión.
Serifa
Esta familia de fuentes es muy conocida y muy fácil de diferenciar debido a los pequeños arreglos o adornos que hay en los extremos de sus letras. Los nombres de estas tipografías suelen terminar en “Serif” y generalmente suelen verse en medios impresos ya que hace que la lectura de amplios textos sea más legible.
Paloseco
Al contrario de las serifas, estas familias de tipografías son lisas y sencillas, sin ningún tipo de adorno en los extremos de sus letras. Sus nombres suelen terminar en “Sans Serif” y generalmente se usan en medios digitales ya que evita que la vista del usuario se canse rápidamente.
Monoespaciada
Este tipo de fuentes se caracterizan porque todas sus letras tienen exactamente el mismo ancho. Se usan extendidamente para tareas de programación o emuladores de terminal ya que dan uniformidad a cada línea de contenido.
Categorías para las tipografías en CSS
Las propiedades que se utilizan para diseñar y estilizar las tipografías en CSS pueden agruparse principalmente en dos grupos que te van a ser muy útiles al momento de saber qué es exactamente lo que quieres hacer:
- Estilos de fuente: Todas las propiedades que afectan directamente la tipografía en el texto como, por ejemplo, el tamaño de la fuente, la tipografía que se usará, su tamaño y si será en negrita, itálica y demás.
- Estilos de diseño de texto: Todas las propiedades que afecten el espaciado y otras características del texto en sí, como el espacio entre las líneas, letras o la justificación del contenido.
Propiedades CSS que debes conocer
Comenzando por los estilos de fuente, te explicaremos algunos de los atributos más comunes:
Tamaño de la tipografía
La propiedad font-size te permite especificar el tamaño de la fuente que vamos a utilizar. Es posible indicar tres valores diferentes:
- Medidas específicas: Con píxeles, porcentajes u otras unidades indicamos el tamaño preciso en el que quieres la tipografía. Es más sencillo comenzar con pixeles (px) pero hay técnicas mucho más avanzadas como las unidades rem.
- Medidas relativas: con palabras claves como larger para indicar un mayor tamaño que el actual o smaller para un tamaño menor.
- Medidas absolutas: Con palabras clave que representan un tamaño ya por defecto. Medium para un tamaño medio, small para uno pequeño o x-small para uno muy pequeño.
Peso de la tipografía
Font-Weight es el grosor de la fuente. Esto dependerá siempre de la tipografía escogida porque no todas soportan cualquier grosor. Al igual que con la propiedad anterior, puedes indicar tres valores:
- Medidas específicas: En un rango de 100 a 900 (siendo 900 más gruesa). Suelen incrementarse los valores de 100 en 100.
- Medidas relativas: Más gruesa: Bolder, y menos gruesa: Lighter.
- Medidas absolutas: Palabras clave para indicar el peso de la tipografía, normal o bold siendo normal el valor por defecto.
Familia tipográfica
Font-family te permite elegir cualquier tipografía simplemente escribiendo su nombre. Si el nombre está compuesto por más de una palabra separada por espacios, lo mejor es usar comillas simples de la siguiente forma:
body {
font-family: Arial;
font-family: 'Beau Sans';
}
Algo importante a tener en cuenta con font-family es que estas tipografías serán visibles únicamente si el usuario las tiene instaladas en su dispositivo, en caso contrario, mostrará una fuente suplente dentro del sistema. Sin embargo, esto puede arreglarse añadiendo entre comas varias opciones distintas de fuentes. También puedes consultar en páginas como Font Family cómo se visualizaría una fuente en distintos dispositivos.
Estilo de la tipografía
Font-style te permite aplicar estilos a las tipografías elegidas, por ejemplo negrita o cursiva. Puede tomar estos valores:
- Normal: El estilo por defecto sin ningún cambio visible.
- Italic: Estilo de cursiva.
- Oblique: El estilo oblicuo es muy similar a la cursiva, salvo que a diferencia de ella, la inclinación en sus letras se hace de forma artificial.
Espaciado entre líneas: line-height permite establecer la altura de cada línea de texto. Se le puede aplicar casi cualquier valor de tamaño y extensión, pero se recomienda que generalmente sea entre 1.5 – 2 (doble espacio.)
¿Quieres conocer más sobre CSS?
Ya que has aprendido lo fundamental para poder usar tipografías en CSS, podría ser tu oportunidad para que te conviertas en un experto del desarrollo web con nosotros. Con nuestro Bootcamp en Desarrollo Web, podrás dominar esta y otras herramientas como Javascript, React, Microservicios, y hasta despliegues de servidores en menos de 7 meses. ¡Inscríbete ahora!
