C22Dar estilo al texto con CSS en lugar de usar imágenes de texto

Aplicabilidad

Todas las tecnologías compatibles con CSS.

Descripción

El objetivo de esta técnica es demostrar cómo puede usarse CSS para controlar la presentación visual del texto. Esto permitirá a los usuarios modificar, a través del agente de usuario, las características visuales del texto para adaptarlas a sus necesidades. Las características del texto incluyen aspectos como el tamaño, el color, la familia tipográfica y la posición relativa.

CSS beneficia a la accesibilidad principalmente al separar la estructura del documento de su presentación. Las hojas de estilo se diseñaron para permitir un control preciso, fuera del marcado, del espaciado entre caracteres, la alineación del texto, la posición de los objetos en la página, la salida de audio y voz, las características de las fuentes, etc. Al separar el estilo del marcado, los autores pueden simplificar y limpiar el marcado de su contenido, haciéndolo al mismo tiempo más accesible.

El texto dentro de las imágenes presenta varios problemas de accesibilidad, entre ellos la imposibilidad de:

• escalarse según la configuración del navegador
• mostrarse en los colores especificados en la configuración del navegador o en las reglas de las hojas de estilo definidas por el usuario
• respetar la configuración del sistema operativo, como el alto contraste

Es mejor usar texto real para la parte textual de estos elementos, y una combinación de marcado semántico y hojas de estilo para crear la presentación visual adecuada. Para que esto funcione bien, elija fuentes que probablemente estén disponibles en el sistema del usuario y defina fuentes alternativas para los usuarios que quizá no tengan la primera fuente especificada. Los equipos y agentes de usuario más modernos suelen suavizar o aplicar antialiasing a todo el texto, por lo que es probable que sus encabezados y botones se vean bien en estos sistemas sin necesidad de recurrir a imágenes de texto.

Las siguientes propiedades CSS son útiles para dar estilo al texto y evitar la necesidad de incluir texto en imágenes:

• La propiedad font-family se usa para mostrar la parte de código en una familia tipográfica monoespaciada.
• La propiedad text-align se usa para mostrar el texto a la derecha de la ventana gráfica.
• La propiedad font-size se usa para mostrar el texto en un tamaño mayor.
• La propiedad font-style se usa para mostrar el texto en cursiva.
• La propiedad font-weight se usa para establecer el grosor con que deben mostrarse los caracteres del texto.
• La propiedad color se usa para mostrar el color del texto o de los contenedores de texto.
• La propiedad line-height se usa para mostrar la altura de línea de un bloque de texto.
• La propiedad text-transform se usa para controlar si las letras del texto van en mayúsculas o minúsculas.
• La propiedad letter-spacing se usa para controlar el espaciado entre las letras del texto.
• La propiedad background-image puede usarse para mostrar texto sobre un fondo no textual.
• El pseudoelemento ::first-line puede usarse para modificar la presentación de la primera línea de un bloque de texto.
• El pseudoelemento ::first-letter puede usarse para modificar la presentación de la primera letra de un bloque de texto.
• Los pseudoelementos ::before y ::after pueden usarse para insertar contenido no textual decorativo antes o después de los bloques de texto.

Ejemplos

<p>The JavaScript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

code { font-family:"Courier New", Courier, monospace }

<p class="right">This text should be to the right of the viewport.</p>

.right { text-align: right; }

<p>09 <strong class="largersize">March</strong> 2008</p>

strong.largersize { font-size: 1.5em; }

<p>09 <em class="highlight">March</em> 2008</p>

.highlight{ color: red; }

<p>The article is available in the
  <a href="https://www.example.com" class="featuredsite">Endocrinology Blog</a>.
</p>

.featuredsite{ font-style:italic; }

<p>This deal is available <span class="highlight">now!</span></p>

.highlight { font-weight:bold; color:#990000; }

<p>09 <span class="caps">March</span> 2008</p>

.caps { text-transform:uppercase; }

<p>Concern for man and his fate must always form the chief interest of all technical 
endeavors. Never forget this in the  midst of your diagrams and equations.</p>

p { line-height:2; }

<h1 class="overlap"><span class="upper">News</span>
  <span class="byline">today</span>
</h1>

.overlap { line-height:0.2;}
.upper { text-transform:uppercase; }
.byline {
  color:red;
  font-style:italic;
  font-weight:bold;
  padding-left:3em;
}

<h1 class="overlap"><span class="upper">News</span><br>
  <span class="byline">today</span>
</h1>

.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline {
  color:red;
  font-style:italic;
  font-weight:bold;
  padding-left:3em;
  letter-spacing:-0.1em;
}

<h1 class="upper2">News</h1>

.upper2 { text-transform:uppercase; letter-spacing:1em; }

<div id="banner"><span id="bannerstyle1">Welcome</span> 
  <span id="bannerstyle2">to your local city council</span>
</div>

#banner { 
  color:white; 
  background-image:url(banner-bg.gif); 
  background-repeat:no-repeat; 
  background-color:#003399; 
  width:29em; 
}
#bannerstyle1 { 
  text-transform:uppercase; 
  font-weight:bold; 
  font-size:2.5em;
}
#bannerstyle2 { 
  font-style:italic; 
  font-weight:bold; 
  letter-spacing:-0.1em;
  font-size:1.5em; 
}

<p class="startline">Once upon a time...<br />
  ...in a land far, far away...</p>

.startline::first-line { font-size:2em; color:#990000; }

<p class="startletter">Once upon a time...</p>

.startletter::first-letter { font-size:2em; color:#990000; vertical-align:middle; }

Pruebas

Técnicas relacionadas

• C8: Usar la propiedad letter-spacing de CSS para controlar el espaciado dentro de una palabra
• C12: Usar porcentajes para el tamaño de la fuente
• C13: Usar tamaños de fuente con nombre
• C14: Usar unidades em para el tamaño de la fuente
• C21: Especificar un interlineado en CSS
• SCR34: Calcular el tamaño y la posición de forma que se escalen con el tamaño del texto

Recursos

• CSS2.1 Specification
• CSS Fonts Module Level 3
• CSS Color Module Level 4
• CSS Text Module Level 3
• CSS Backgrounds and Borders Module Level 3
• Selectors Level 3
• Learning CSS (aprender CSS)
• CSS and Accessibility (CSS y accesibilidad)