Apuntes html

HTML nunca falla, solo se ve raro.

Apéndice II: Colores y fuentes

Los colores y fuentes son elementos fundamentales para el diseño web. En el HTML moderno, estos aspectos visuales se definen exclusivamente con CSS, abandonando las antiguas etiquetas y atributos que mezclaban contenido con presentación. Este apéndice te guiará a través de los conceptos esenciales: desde los diferentes formatos de color (códigos hexadecimales, RGB, HSL) hasta la correcta implementación de fuentes con font-family y fuentes web.

También exploraremos la evolución histórica, incluyendo los atributos obsoletos como <font> y bgcolor que anteriormente se utilizaban pero que hoy han sido completamente reemplazados por CSS. Aprenderemos a elegir combinaciones de colores y fuentes que no solo sean visualmente atractivas, sino también accesibles y legibles en cualquier dispositivo.

Colores en diseño web

Los colores son uno de los elementos más poderosos en el diseño web, capaces de establecer jerarquías visuales y mejorar la experiencia del usuario. Definen no solo el fondo y el texto, sino también bordes, sombras y otros elementos decorativos.

En HTML5 y el desarrollo web moderno, todos los colores se aplican exclusivamente a través de CSS usando propiedades como background-color, color, border-color, entre otras. Esto representa una evolución significativa respecto a los antiguos atributos como bgcolor que mezclaban presentación con estructura.

Nota: Siempre verifica que el contraste entre texto y fondo cumpla con las pautas WCAG. Un contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande garantiza legibilidad para usuarios con discapacidades visuales.

Formatos de color

CSS ofrece múltiples formas de especificar colores, cada una con sus propias ventajas según el contexto de uso:

Hexadecimal
Código de 6 dígitos precedido por # (por ejemplo, #FF0000 para rojo). Es el estándar más común y ampliamente reconocido. También admite formato corto de 3 dígitos como #F00.
RGB
Valores separados de rojo, verde y azul de 0 a 255 (por ejemplo, rgb(255, 0, 0) para rojo). Intuitivo para quienes trabajan con diseño digital.
RGBA
Como RGB pero con canal alfa para transparencia (por ejemplo, rgba(255, 0, 0, 0.5) para rojo semitransparente).
HSL
Matiz, saturación y luminosidad (por ejemplo, hsl(0, 100%, 50%) para rojo). Más intuitivo para ajustes de color.
Nombres predefinidos
Palabras clave como red, blue, crimson. Útiles para prototipado rápido pero limitadas en variedad.

Ejemplo comparativo de formatos:

/* Diferentes formas de definir el mismo rojo */
.ejemplo1 { color: #FF0000; }           /* Hexadecimal */
.ejemplo2 { color: rgb(255, 0, 0); }    /* RGB */
.ejemplo3 { color: hsl(0, 100%, 50%); } /* HSL */
.ejemplo4 { color: red; }               /* Nombre */

/* Con transparencia */
.semitransparente {
  background-color: rgba(255, 0, 0, 0.3); /* Rojo con 30% opacidad */
}

Colores seguros (contexto histórico)

Durante los años 90, las limitaciones técnicas de los monitores CRT y las primeras tarjetas gráficas restringían severamente la paleta de colores disponible. Los 216 colores seguros (web-safe colors) surgieron como una solución para garantizar consistencia visual en navegadores como Netscape Navigator e Internet Explorer en sistemas con paletas de color limitadas.

Estos colores seguros se basaban en combinaciones específicas de valores RGB que todos los sistemas podían reproducir fielmente. Hoy en día, con pantallas capaces de mostrar millones de colores y tecnologías como sRGB, Display P3 y HDR, cualquier código hexadecimal o RGB es técnicamente válido y se renderizará correctamente.

Sin embargo, entender los colores básicos sigue siendo valioso para crear paletas coherentes y accesibles. La selección de colores complementarios y el uso de herramientas modernas de diseño han reemplazado las limitaciones técnicas del pasado.

Tabla de colores fundamentales:

Nombre Hexadecimal RGB Uso común
Negro #000000 rgb(0, 0, 0) Texto, contornos
Blanco #FFFFFF rgb(255, 255, 255) Fondos, espacios
Rojo #FF0000 rgb(255, 0, 0) Alertas, errores
Verde #00FF00 rgb(0, 255, 0) Éxito, confirmación
Azul #0000FF rgb(0, 0, 255) Enlaces, información
Gris #808080 rgb(128, 128, 128) Texto secundario
Amarillo #FFFF00 rgb(255, 255, 0) Advertencias, destacados
Cian #00FFFF rgb(0, 255, 255) Elementos decorativos
Magenta #FF00FF rgb(255, 0, 255) Acentos creativos
Naranja #FFA500 rgb(255, 165, 0) Call-to-action

Algunas herramientas recomendadas:

Fuentes en diseño web

La tipografía es fundamental en el diseño web, ya que determina no solo cómo se ve el texto, sino también la legibilidad, accesibilidad y personalidad de tu sitio web. Una buena selección tipográfica puede mejorar significativamente la experiencia del usuario y la percepción de profesionalidad.

En HTML5 moderno, todas las fuentes se especifican exclusivamente con CSS usando la propiedad font-family, abandonando completamente la obsoleta etiqueta <font>. El navegador utiliza un sistema de cascada: intenta usar la primera fuente de la lista, y si no está disponible en el sistema del usuario, pasa a la siguiente, hasta llegar a una familia genérica de respaldo.

Mejores prácticas tipográficas:

  • Siempre incluye una fuente genérica al final de tu lista
  • Limita el número de fuentes diferentes (máximo 2-3 por diseño)
  • Considera el rendimiento: cada fuente web añade tiempo de carga
  • Verifica la legibilidad en diferentes tamaños y dispositivos

Familias de fuentes y sus características

Sans-serif
Fuentes sin remates (serif), con líneas limpias y modernas. Ideales para pantallas y textos largos en web. Ejemplos: Arial, Helvetica, Verdana, Roboto, Open Sans. Son la elección predilecta para interfaces de usuario y contenido digital.
Serif
Fuentes con pequeños trazos decorativos (remates) en los extremos de las letras. Tradicionalmente asociadas con elegancia y formalidad. Ejemplos: Times New Roman, Georgia, Garamond, Merriweather. Excelentes para textos impresos y contenido editorial.
Monospace
Fuentes donde cada carácter ocupa exactamente el mismo ancho horizontal. Esenciales para mostrar código, datos tabulares y contenido que requiere alineación perfecta. Ejemplos: Courier New, Monaco, Fira Code, Source Code Pro.
Cursive
Fuentes que imitan la escritura a mano o caligrafía. Uso limitado, generalmente para títulos decorativos o elementos de diseño específicos. Ejemplos: Comic Sans MS, Brush Script.
Fantasy
Fuentes altamente decorativas y temáticas. Reservadas para elementos gráficos muy específicos donde la legibilidad no es prioritaria.

Fuentes del sistema (web-safe fonts)

Estas fuentes están preinstaladas en la mayoría de sistemas operativos, garantizando disponibilidad y rendimiento óptimo:

Fuente Familia Sistemas Características
Arial Sans-serif Windows, macOS, Linux Universal, alta legibilidad
Helvetica Sans-serif macOS, iOS Diseño clásico, profesional
Verdana Sans-serif Windows, macOS Optimizada para pantalla
Times New Roman Serif Windows, macOS Estándar para documentos
Georgia Serif Windows, macOS Diseñada para web
Courier New Monospace Windows, macOS Ideal para código

Ejemplo de declaración con respaldos:

/* Stack de fuentes con múltiples respaldos */
body {
  font-family:
    "Helvetica Neue",     /* macOS moderno */
    Helvetica,            /* macOS clásico */
    Arial,                /* Windows */
    "Liberation Sans",    /* Linux */
    sans-serif;           /* Genérica de respaldo */
}

/* Para contenido editorial */
.articulo {
  font-family:
    Georgia,              /* Disponible en mayoría de sistemas */
    "Times New Roman",    /* Respaldo Windows */
    Times,                /* Respaldo Unix */
    serif;                /* Genérica final */
}

Fuentes web modernas

Los servicios de fuentes web han revolucionado la tipografía digital, permitiendo el uso de fuentes profesionales sin requerir instalación local en los ordenadores de los usuarios Google Fonts ofrece más de 1,400 familias tipográficas gratuitas, seguido por servicios de pago como Adobe Fonts y Typekit.

Las fuentes web se cargan dinámicamente desde servidores CDN optimizados, ofreciendo beneficios como actualizaciones automáticas, optimización de rendimiento y consistencia multiplataforma. Sin embargo, es importante implementarlas correctamente para evitar impactos negativos en el rendimiento y la experiencia del usuario.

Implementación completa de Google Fonts:

<head>
  <!-- Preconexión para mejorar rendimiento -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Carga de fuente optimizada -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700
  &family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

  <style>
    /* Aplicación con respaldos apropiados */
    body {
      font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    }

    h1, h2, h3 {
      font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Título con Roboto</h1>
  <p>Párrafo con Open Sans, optimizado para legibilidad</p>
</body>

Nota: la línea font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; determina que fuente ha de usarse con preferencia: 1.- 'Open Sans' (descargada de Google Fonts) 2.- Si no está disponible, usa la fuente del sistema en dispositivos Apple (-apple-system) 3.- BlinkMacSystemFont: para versiones antiguas de Chrome en macOS. 4.- 'Segoe UI' - Fuente del sistema en Windows 5.- Arial: Fuente clásica disponible en casi todos los sistemas y 6.- sans-serif: cualquier fuente sans serif disponible. Por lo tanto, con diferentes dispositivos, si tienes Open Sans instalada o tu dispositivo la puede descargar de google fonts, verás Open Sans; en cualquier dispositivo Mac sin Open Sans, verás San Francisco (fuente del sistema de Apple). En Windows sin Open Sans: verías Segoe UI. En un dispositivo antiguo verás Arial, y en los dispositivos mas básicos la fuente sans-serif por defecto

actualmente puedes usar system-ui (en lugar de -apple-system, BlinkMacSystemFont, 'Segoe UI') para permitir que el sistema escoja su propia fuente

Atributos obsoletos y migración a CSS

El desarrollo web ha evolucionado significativamente desde sus primeros días. HTML inicialmente mezclaba estructura y presentación, pero la separación de responsabilidades se ha convertido en un principio fundamental del desarrollo moderno. Los siguientes elementos y atributos, aunque funcionaron durante años, están oficialmente obsoletos y deben evitarse:

Nota: Los navegadores modernos aún pueden renderizar estos atributos por compatibilidad, pero no están garantizados para el futuro y pueden causar problemas de accesibilidad.

Elementos y atributos desaconsejados:

<font face="Arial" color="red" size="3">
Controlaba fuente, color y tamaño del texto. Completamente reemplazado por las propiedades CSS font-family, color, y font-size.
<body bgcolor="#0000FF" background="imagen.jpg" text="#FFFFFF">
Definía colores de fondo, imágenes de fondo y color del texto para toda la página. Sustituido por background-color, background-image, y color en CSS.
<table bgcolor="...">, <td bgcolor="...">
Aplicaba colores de fondo a tablas y celdas. Reemplazado por background-color en CSS.
<center>
Centraba contenido horizontalmente. Sustituido por text-align: center o técnicas de layout modernas como Flexbox.

Comparación: Código obsoleto vs. moderno

Ejemplo obsoleto (no usar):

<body bgcolor="#E6F3FF" text="#333333">
  <center>
    <font face="Arial" color="#0066CC" size="5">
      <b>Título Principal</b>
    </font>
  </center>

  <font face="Verdana" size="3">
    Este párrafo usa etiquetas obsoletas que mezclan
    contenido con presentación.
  </font>

  <table bgcolor="#FFFFFF" border="1">
    <tr>
      <td bgcolor="#CCCCCC"><font color="red">Celda</font></td>
    </tr>
  </table>
</body>

Equivalente moderno y semántico:

<head>
  <style>
    body {
      background-color: #E6F3FF;
      color: #333333;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 20px;
    }

    .titulo-principal {
      font-family: Arial, sans-serif;
      color: #0066CC;
      font-size: 2.5em;
      font-weight: bold;
      text-align: center;
      margin: 20px 0;
    }

    .contenido {
      font-size: 1.1em;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
    }

    .tabla-ejemplo {
      background-color: #FFFFFF;
      border: 1px solid #CCCCCC;
      border-collapse: collapse;
      margin: 20px auto;
    }

    .tabla-ejemplo td {
      background-color: #F5F5F5;
      padding: 10px;
      border: 1px solid #CCCCCC;
    }

    .texto-destacado {
      color: #CC0000;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <header>
    <h1 class="titulo-principal">Título Principal</h1>
  </header>

  <main class="contenido">
    <p>Este párrafo utiliza CSS moderno que separa completamente
       el contenido de la presentación, mejorando la accesibilidad
       y mantenibilidad del código.</p>

    <table class="tabla-ejemplo">
      <tbody>
        <tr>
          <td><span class="texto-destacado">Celda con estilo moderno</span></td>
        </tr>
      </tbody>
    </table>
  </main>
</body>

Beneficios de la migración a CSS:

  • Mantenibilidad: Cambios globales desde un solo lugar
  • Performance: Separación permite caché eficiente de estilos
  • Accesibilidad: Mejor soporte para tecnologías asistivas
  • Responsive: Adaptación fácil a diferentes dispositivos
  • SEO: HTML más limpio y semántico

Ejemplo práctico completo

Esta demostración integra todos los conceptos del apéndice: colores modernos, tipografía web, y técnicas CSS actuales para crear una página visualmente atractiva y técnicamente sólida:

TOP