CSS - Fuentes

Familias de fuentes genéricas

En CSS, existen cinco familias de fuentes genéricas que se pueden utilizar para especificar la apariencia del texto en una página web:

1. Serif: Las fuentes serif tienen pequeñas líneas o trazos en los extremos de las letras. A menudo se utilizan para el texto principal en medios impresos y pueden dar un aspecto formal al texto. Ejemplos de fuentes serif incluyen Times New Roman, Georgia y Garamond.

2. Sans-serif: Las fuentes sans-serif no tienen líneas en los extremos de las letras. Tienen un aspecto limpio, lo que las hace populares para pantallas digitales. Las fuentes sans-serif se utilizan a menudo para encabezados, menús y texto principal en sitios web. Ejemplos de fuentes sans-serif incluyen Arial, Helvetica y Verdana.

3. Monospace: Las fuentes monospace tienen caracteres que son todos del mismo ancho fijo. Cada carácter ocupa el mismo espacio horizontal, lo que las hace ideales para mostrar fragmentos de código o datos tabulares. Ejemplos de fuentes monospace incluyen Courier, Courier New y Lucida Console.

4. Cursive: Las fuentes cursivas imitan el texto manuscrito y tienen una apariencia informal. A menudo se utilizan para encabezados especiales o citas, pero deben usarse con moderación ya que pueden ser más difíciles de leer en grandes cantidades. Ejemplos de fuentes cursivas incluyen Brush Script, Lucida Handwriting y Comic Sans.

5. Fantasy: Las fuentes fantasy son decorativas e imaginativas que no encajan en otras categorías. Pueden tener formas o diseños únicos, pero deben usarse con cuidado ya que pueden ser difíciles de leer en pasajes largos. Ejemplos incluyen Impact, Papyrus y Chiller.

Pilas de fuentes

Una pila de fuentes es una lista de fuentes especificadas en la propiedad font-family de CSS. Permite definir múltiples opciones de respaldo si la fuente principal no está disponible en el dispositivo del usuario. Para crear una pila de fuentes, se enumeran los nombres separados por comas. El navegador intentará la primera, luego pasará a la siguiente hasta encontrar una disponible.

body {
  font-family: Arial, Helvetica, sans-serif;
}

El navegador intentará primero Arial. Si no está disponible, recurre a Helvetica. Si ambas no están disponibles, utiliza la familia genérica sans-serif. Al crear pilas, considera estas prácticas:

1. Comienza con la opción preferida y luego añade respaldos.
2. Usa la familia genérica al final para que el texto siga siendo legible incluso si ninguna de las especificadas está disponible.
3. Elige tipos similares (por ejemplo, serif, sans-serif) para mantener un aspecto consistente.
4. Limita el número ya que cada extra puede ralentizar el tiempo de carga de la página.
5. Prueba las pilas en diferentes dispositivos y navegadores para lograr la visualización deseada.

Tamaño de fuente

La propiedad font-size en CSS establece el tamaño del texto. Puedes usar varias unidades para especificar el tamaño de fuente, como píxeles (px), em y rem.

1. Píxeles (px): Establecer el tamaño de fuente en píxeles te da un control preciso sobre el tamaño del texto. Sin embargo, usar píxeles puede dificultar que los usuarios cambien el tamaño del texto en sus navegadores.

font-size: 16px;

2. Em (em): La unidad em es relativa al tamaño de fuente del elemento padre. Si el tamaño de fuente del elemento padre es 16px, establecer el tamaño de fuente del elemento hijo a 1.5em resultaría en un tamaño de fuente de 24px (16px * 1.5). Usar em permite tamaños de fuente más flexibles y escalables.

font-size: 1.2em;

3. Rem (rem): La unidad rem es similar a em, pero es relativa al tamaño de fuente del elemento raíz (html) en lugar del elemento padre. Esto facilita mantener tamaños consistentes en todo un documento, por defecto a 16px, por lo que establecer un valor como 1.5rem resulta en un valor equivalente al visto con valores basados en píxeles, siendo igual a alrededor de veinticuatro píxeles (24 px).

font-size: 1.2rem;

Al decidir entre tamaños absolutos y relativos, considera:

• Los tamaños absolutos te dan un control preciso pero pueden no ser fácilmente redimensionables por los usuarios.
• Los tamaños relativos permiten más flexibilidad y capacidad de respuesta, ya que se adaptan según las propiedades de tamaño de los elementos padre o raíz respectivamente.

Para crear fuentes responsivas que se adapten a diferentes anchos de pantalla, usa consultas de medios CSS ajustando según el ancho de la ventana gráfica:

body {
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

@media screen and (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}

Grosor de fuente

La propiedad font-weight establece qué tan gruesos o delgados aparecen los caracteres usando valores de palabras clave o numéricos:

• Palabras clave: normal (por defecto), bold, lighter, bolder
• Numéricos: 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900

No todos los pesos están disponibles para cada familia cuando se usan valores numéricos. Considera estas mejores prácticas:

Usa cuatrocientos (400) para textos normales y setecientos (700) para textos en negrita, asegurando resultados consistentes en diferentes fuentes. Evita pesos extremos como cien (100) o novecientos (900) ya que pueden no ser legibles en contextos de tamaño más pequeño. Mantén los pesos comunes (cuatrocientos/setecientos) para textos de cuerpo mientras usas adicionales si es necesario dentro de encabezados contextualmente hablando.

body {
    font-weight: 400;
}

h1 {
    font-weight: 700;
}

Estilo de fuente

La propiedad font-style establece estilos normal/italic/oblique respectivamente. La cursiva inclina una versión cursiva, mientras que oblicua inclina la versión normal. Evita grandes bloques ya que reduce la legibilidad. Contextualmente hablando, enfatizar palabras, títulos, términos técnicos, frases en otro idioma son casos de uso donde las formas en cursiva son más adecuadas en general.

p {
    font-style: normal;
}

em {
    font-style: italic;
}

Variante de fuente

La propiedad font-variant permite establecer versalitas, mostrando letras minúsculas como versiones más pequeñas de las mayúsculas. Las abreviaturas y acrónimos las hacen destacar sin usar mayúsculas, añadiendo interés visual a encabezados y subencabezados contextualmente hablando.

h2 {
    font-variant: small-caps;
}

abbr {
    font-variant: small-caps;
}

Altura de línea

La propiedad line-height establece el espacio entre líneas. Se pueden usar unidades de longitud (px/em/rem/valores sin unidad recomendados para escalar proporcionalmente). El punto de partida suele estar en el rango de uno punto dos a uno punto seis, dependiendo de la familia y el tamaño en diferentes contextos.

body {
    line-height: 1.5;
}

h1 {
    line-height: 1.2;
}

¿Qué son las fuentes web?

Las fuentes web son tipos de letra personalizados que se pueden cargar y usar en un sitio web. Permiten a los diseñadores ir más allá del conjunto limitado de fuentes del sistema disponibles en los dispositivos de los usuarios. Posibilitan un diseño tipográfico más diverso, mejorando el atractivo visual y la imagen de marca de un sitio web.

Las principales ventajas de usar fuentes web incluyen:

1. Mayor flexibilidad de diseño: Las fuentes web ofrecen muchos estilos y opciones, permitiendo a los diseñadores elegir tipos de letra que coincidan con el aspecto deseado y la identidad de marca.

2. Consistencia en diferentes dispositivos: Al usar fuentes web, los diseñadores pueden asegurarse de que la tipografía se mantenga consistente en diferentes dispositivos y plataformas, ya que las fuentes se cargan desde un servidor remoto en lugar de depender de las fuentes del sistema del usuario.

3. Mejora de la experiencia del usuario: Las fuentes web pueden mejorar la legibilidad, haciendo que el contenido sea más atractivo para leer.

Cómo usar fuentes web

Hay varias formas de usar fuentes web en un sitio:

1. Importar fuentes web usando @font-face: La regla CSS @font-face te permite especificar un archivo de fuente personalizado para ser descargado y usado en tu sitio web. Puedes alojar los archivos de fuentes en tu propio servidor o usar un proveedor de servicios de fuentes.

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font-file.woff2') format('woff2'),
       url('path/to/font-file.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

2. Alojar fuentes web localmente: Puedes descargar los archivos de fuentes y alojarlos en tu propio servidor, lo que te da control total sobre ellos pero requiere más configuración y mantenimiento.

3. Usar servicios de fuentes web: Muchos proveedores como Google Fonts y Adobe Fonts ofrecen numerosas fuentes web que se pueden integrar fácilmente en tu sitio web sin necesidad de alojamiento propio.

Formatos de fuentes web

Hay varios formatos de fuentes web disponibles, cada uno con sus propias características y soporte de navegador:

1. TTF (TrueType Font): TTF es un formato antiguo compatible con la mayoría de los navegadores pero tiene tamaños de archivo más grandes en comparación con los formatos más nuevos.

2. WOFF (Web Open Font Format): WOFF está diseñado para la web con características de compresión; es ampliamente compatible con los navegadores modernos.

3. WOFF2: WOFF2 ofrece mejor compresión que WOFF, lo que resulta en tamaños de archivo más pequeños y tiempos de carga más rápidos; tiene buen soporte de navegador pero puede no funcionar en navegadores más antiguos.

4. EOT (Embedded OpenType): EOT fue utilizado por Internet Explorer; tiene soporte limitado en navegadores modernos, por lo que generalmente no se recomienda para proyectos nuevos.

5. Fuentes SVG: Las fuentes SVG son vectoriales y se pueden escalar sin perder calidad. Sin embargo, tienen soporte limitado de navegadores y no se usan ampliamente.

Al usar fuentes web, es una buena práctica proporcionar múltiples formatos para maximizar la compatibilidad del navegador. Puedes usar la regla @font-face para especificar diferentes formatos de archivo, y el navegador elegirá el más adecuado que soporte.

¿Qué son los iconos de fuente?

Los iconos de fuente son símbolos que forman parte de una fuente. Se pueden usar como iconos en sitios web y darles estilo con CSS, como texto normal. Los iconos de fuente son vectoriales, por lo que se pueden escalar sin perder calidad y se adaptan a diferentes tamaños de pantalla.

Las principales ventajas de usar iconos de fuente incluyen:

1. Flexibilidad: Puedes darles estilo fácilmente usando propiedades CSS como color, tamaño y sombras para que coincidan con el diseño de tu sitio web.

2. Rendimiento: Los iconos de fuente cargan más rápido en comparación con los iconos de imagen tradicionales porque son parte de un archivo de fuente.

3. Escalabilidad: Al ser vectoriales, los iconos de fuente mantienen su nitidez en cualquier tamaño sin pixelación ni pérdida de calidad.

4. Accesibilidad: Puedes hacer que los iconos de fuente sean accesibles para los lectores de pantalla utilizando un marcado semántico adecuado y proporcionando texto alternativo.

Cómo usar iconos de fuente

Para usar iconos de fuente en un sitio web, puedes importar una biblioteca existente o crear tus propios iconos personalizados:

1. Importar bibliotecas: Hay muchas bibliotecas populares disponibles como Font Awesome, Material Icons e Ionicons. Estas bibliotecas ofrecen iconos prediseñados que puedes incluir fácilmente en tu proyecto enlazando el archivo CSS de la biblioteca y usando los nombres de clase proporcionados.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<i class="fas fa-home"></i>

2. Crear fuentes personalizadas: Si las bibliotecas existentes no satisfacen tus necesidades, puedes crear fuentes personalizadas usando herramientas como Icomoon o Fontello, que te permiten seleccionar o subir SVGs y generar un archivo de fuente personalizado junto con el código CSS necesario.

Al usar iconos de fuente:

1. Elige una biblioteca confiable.
2. Utiliza marcado semántico como elementos <i> o <span> para mostrar el icono.
3. Optimiza el archivo de iconos incluyendo solo los glifos necesarios.
4. Proporciona opciones de respaldo para los usuarios que han desactivado las fuentes personalizadas.
5. Usa CSS para un tamaño y alineación consistentes del icono.

Los iconos de fuente ofrecen una manera eficiente de añadir símbolos escalables y elegantes a tu sitio web mientras mantienes buenas prácticas de rendimiento.