Manual de HTML: Fuentes

Fuentes para páginas web: tipos y tamaños

Qué fuentes utilizar en una página web es un tema problemático, dado que las fuentes disponibles difieren de un equipo a otro en función del Sistema Operativo y del navegador, variando por ello el aspecto de la página. Vamos a estudiar dos de las propiedades CSS más importantes para definir las fuentes, font-family y font-size.

font-family

Debemos utilizar las denominadas fuentes seguras, aquéllas que están disponibles en prácticamente la totalidad de las computadoras por estar ampliamente extendidas. De esta manera nos aseguramos de que todos los usuarios de nuestra web obtengan el mismo look y estilo al acceder a nuestra página, independientemente de su máquina.

CSS proporciona un sistema de retrocesos. El tipo de letra preferido debe figurar en primer lugar, a continuación las fuentes que reemplazarán a la primera si no está disponible (en ese orden), terminando la lista con una fuente genérica de las cinco posibles: serif, sans-serif, monospace, cursive y fantasy.

Para mantener bajo control las fuentes utilizadas en nuestra página web podemos establecer la propiedad font-family de la siguiente manera:

• En el head incluiremos una etiqueta link que apunte a nuestra hoja de estilos (en la que incluiremos código PHP):

  <link rel="stylesheet" href="/style.css.php" type="text/css" media="screen" />

• El contenido de style.css.php será similar a esto:

  <?php
  header('Content-type: text/css');
   
  $font_families = array(
      'body'        => "Verdana, 'Trebuchet MS', Arial, sans-serif",
      'titles'      => "Georgia, 'Times New roman', Times, serif",
      'code'        => "'Courier New', Courier, 'Andale Mono', monospace",
      'handwriting' => "'Comic Sans MS', cursive",
      'decorative'  => "'Impact', fantasy"
  );
  ?>
  body {
      font-family: <?php echo $font_families['body']; ?>;
  }
  #header {
      font-family: <?php echo $font_families['titles']; ?>;
  }

font-size

Para configurar el tamaño de fuente en nuestra página web tenemos varias opciones, y según el sistema que empleemos podemos encontrarnos diversos problemas:

1. Cross-browser and cross-platform: dada la diversidad de navegadores, dispositivos y Sistemas Operativos, no es nada fácil conseguir que una página web sea cross browsers and platforms. De entrada, en Mac se utiliza 72 dpi mientras que en Windows se emplea 96 dpi...
2. Accessibility, resizeable in IE: iExplorer no redimensiona texto cuyo tamaño haya sido establecido en px.
3. Cascade effect: los tamaños de fuente relativos hacen referencia al elemento padre, por lo que en estructuras anidadas obtendremos resultados indeseados.

Veamos las diferentes opciones para establecer el tamaño de fuente.

Veamos la equivalencia entre absolute keywords, pt y px.

Una buena opción es utilizar absolute keywords, la única desventaja es que sólo dispone de 7 posibles tamaños de letra pero generalmente es suficiente. Para configurar con este sistema el tamaño de las fuentes utilizadas en nuestra página web podemos hacer lo siguiente:

• Incluiremos en nuestra hoja de estilos (style.css.php) algo similar a esto:

  <?php
  header('Content-type: text/css');
   
  $font_sizes = array(
  	'minimum'    => "xx-small", //  9px - tamaño mínimo legible
  	'footer'     => "x-small",  // 10px
  	'body'       => "small",    // 13px
  	'big'        => "medium",   // 16px
  	'titles'     => "large",    // 18px
  	'posttitle'  => "x-large",  // 24px
  	'header'     => "xx-large"  // 32px
  );
  ?>
  body {
      font-size: <?php echo $font_sizes['body']; ?>;
  }
  #header {
      font-size: <?php echo $font_sizes['header']; ?>;
  }