Cómo dar estilo a textos con CSS y HTML

A pesar de que con el paso de los años las imágenes, los videos y las animaciones han tomado gran relevancia como medios de contenido por Internet, el texto sigue representando la principal fuente de información y la de uso más común.

La importancia de manejar correctamente un texto va desde la codificación hasta la interfaz.

Un diseñador web debe tener siempre en cuenta los múltiples problemas que pueden surgir desde el momento que decide establecer las diferentes tipografías.

En la primera parte de este artículo estudiaremos la manera en que se debe estructurar un texto, como aplicar de manera correcta las etiquetas HTML que se relacionan con él y cómo lograr su manipulación para generar una buena semántica en el código y una presentación adecuada en la interfaz.

En la segunda parte veremos como dar estilos CSS a los tipos de textos principales.

Dar formato a un texto en HTML

Debido a que su aplicación es sencilla, muchos consideran al texto algo fácil de implementar en una estructura HTML sin embargo se omiten muchos aspectos relativos a su formato.

Nos concentramos tanto en aspectos de la estructura del sitio, capas, links, secciones, que nos olvidamos que existen toda una gama de etiquetas desarrolladas exclusivamente para dar un formato correcto al texto.

Desgraciadamente, actualmente siguen siendo muchas las malas costumbres que se tienen en relación al texto, una de las más comunes es el manejo del salto de línea “br” para dar la presentación que deseamos.

Usamos saltos de línea en todos lados, para separar trozos de texto, para separar títulos e incluso para imitar funciones de padding.

El hecho de que algunos navegadores muestren las etiquetas de manera similar, no significa que cumplan la misma función, debemos aprender a marcar los elementos de texto como citas, abreviaturas o códigos, ya que no todos serán párrafos comunes y corrientes.

Resumen de etiquetas HTML para poner texto en una web

Resaltar textos

<strong> Texto de mayor importancia</strong>
Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto. Es una etiqueta importante para el SEO.

<b>texto en negrita</b>
La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.

<em> texto en cursiva </em>
Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.

<h1> títulos y encabezados</h1>
Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.

<big>texto más grande</big>
Una forma rápida de aumentar el tamaño de la fuente. Para hacer el texto más pequeño sin usar css se usa <small>.

_subíndice
Muestra el texto dentro de estas etiquetas por debajo de la línea normal, a modo de un subíndice.

^superíndice
Muestra el texto dentro de estas etiquetas por encima de la línea normal, a modo de un superíndice.

Estructura y disposición de textos en la página

<p>bloque de texto</p>
Establece un bloque personalizado de texto en tu página. Se utilizan sobre todo junto con las hojas de estilos para crear estructuras en los textos web.

<span> Bloque de texto en línea</span>
Similar a la etiqueta div, pero el texto contenido dentro de esta etiqueta sigue el flujo normal del resto, mientras que el texto contenido dentro de la etiqueta <div> actúa como un bloque separándolo visualmente del resto. Puedes leer más información sobre elementos y etiquetas en HTML.

Texto preformateado

<pre> texto preformateado</pre>
Soportes de texto preformateado. Si envuelve alrededor de este texto, que va a seguir la forma
del texto en el código – es decir, sin formato extra tiene que poner pulg Si tienes espacio que en su código, éste aparecerá espaciadas en la página.

<samp> Textos de ejemplo</samp>
Se utiliza para mostrar un ejemplo en pantalla, por lo general de una salida de un programa, un script, etc. Es similar en uso a la etiqueta <code>.

<code> código</code>
Establece el texto como código, se usa mucho en páginas como esta, para ejemplos de código fuente.

Citas y Referencias

<blockquote>cita larga</blockquote>
Sangría todo el bloque de texto de ambas partes y añade saltos de línea superior e inferior. Se utiliza para citas largas.

<cite>cita</cite>
Muestra una cita (el título de una obra a la que estás haciendo referencia, por ejemplo).

<q>citas pequeñas</q>
Se usa para entrecomillar una cita pequeña. A diferencia de <blockquote>, no presenta el texto en un bloque separado sino que sigue el flujo normal de la página.

<dfn> definición</dfn>
Pues eso, para formatear un texto en HTML como una definición.

<abbr>abreviaturas</abbr>
Denota una abreviatura, utilizar el atributo title para darle el significado completo.

<acronym>acrónimos</acronym>
Lo mismo que la anterior. Sólo que en lugar de para abreviaturas se usa para acrónimos.

Ahora vamos a ver en detalle las etiquetas HTML más importantes para textos:

Párrafos

Quizás el elemento más importante que se relaciona con un texto es el párrafo, generalmente su etiqueta es utilizada para definir y englobar la mayor parte del texto y su contenido puede variar mucho, lo cual la convierte en la etiqueta con texto más rico dentro de una página web.

Su declaración es tan sencilla como usar la etiqueta de apertura, el texto deseado y finalmente la clausura, como esto:

<p>Este es un párrafo sencillo</p>

Una distancia será agregara entre los dos párrafos, pues las reglas de escritura nos indican que así debe ser.

Esto no significa que este incorrecto usar etiquetas “br” en ocasiones, si por ejemplo queremos definir un párrafo y dentro de él establecer una distancia podemos hacer algo como esto:

<p>Aquí tenemos un párrafo más largo donde hacemos un salto de línea y<br /> 
continuamos el texto del párrafo debajo </p>

Strong y em

Si lo que queremos es dar énfasis a alguna parte de nuestro texto entonces tenemos dos alternativas, podemos utilizar la etiqueta “em” para dar un énfasis con letra de tipo itálica o “strong” si queremos dar un mayor énfasis y poner el texto en negrita.

<p>Este es un párrafo con <em>énfasis</em>.
Como ya dije, con <strong>¡énfasis!</strong></p>

Cabeceras y títulos

En la gran mayoría de los textos, los párrafos constituyen la parte más grande e importante del contenido, pero en ocasiones dichos párrafos necesitan separarse con títulos y subtítulos para darle una mejor estructura al documento.

Para esas ocasiones fueron creadas las etiquetas de tipo cabecera las cuales están definidas por los nombres “h1”, “h2”, “h3”, “h4”, “h5” y “h6”.

El efecto que se produce al utilizar estas etiquetas es dar un formato que distinga a la línea donde se aplica, resaltándola sobre el resto del texto.

Por defecto agrega un espacio en la parte superior y otro en la parte inferior, aumenta el tamaño de la letra y las pone en negritas.

Si el estilo por defecto de una cabecera no te agrada, o sientes que no se adapta a lo que tienes en la página, no te preocupes recuerda que siempre puedes editar esto con CSS.

<h1>Título del escrito</h1>
<p>Párrafo de texto.</p>

<h2>Subtítulo del escrito</h2>
<p>Texto sobre el subtítulo de importancia 2</p>

<h3>Tercer nivel del escrito</h3>
<p>Texto sobre el subtítulo de importancia 3</p>

<h2>Otro subtítulo del escrito</h2>
<p>Más texto</p>

Citas

Conforme vamos avanzando nos encontremos con etiquetas menos utilizadas cuya función es marcar tipos muy específicos de texto, dentro de esta clase encontramos a las citas.

El hecho de que sean utilizadas con menos frecuencia que los párrafos o los saltos de línea, no significa que no sean importantes.

La principal etiqueta para agregar una cita es “blockquote”, y se usa para señalar una cita de texto grande, que por lo general se busca presentar de manera individual.

Entre los aspectos relevantes de esta etiqueta, encontramos que su contenido se presenta mediante párrafos y podemos agregar un link hacia una página, en caso de que el contenido pueda ser observado por Internet.

<blockquote cite=”https://www.lawebera.es/xhtml-css/conceptos-basicos-html.php“>
  HTML tiene una sintaxis muy sencilla y fácil de comprender,
  el contenido está estructurado en elementos,
  los cuales son declarados mediante el uso
  de etiquetas que proporcionan información
  adicional a través de atributos.
</blockquote>

Otra etiqueta que también puede ser utilizada, en este caso para citas pequeñas, es “q”. A diferencia de “blockquote”, esta etiqueta se utiliza más para desplegar citas “inline” es decir en una sóla línea sin desplegar un bloque individual.

También existe la etiqueta “cite” que sirve para etiquetar al autor de la referencia.

Como se menciona en el artículo
 de <cite>La Webera</cite> sobre el HTML:

<q>HTML tiene una sintaxis muy sencilla
y fácil de comprender, el contenido 
está estructurado en elementos, los cuales 
son declarados mediante el uso de etiquetas 
que proporcionan información adicional 
a través de atributos</q>

Abreviaturas y acrónimos

Otro caso muy específico que podemos encontrar son las abreviaturas y acrónimos, son pocas veces las que llegamos a utilizar estas etiquetas, pero ya dijimos siguen siendo importantes.

Ambas etiquetas puedes contener el atributo “title” lo que permitirá añadir su significado, así cada vez que el usuario pase el cursor sobre la palabra un tooltip se encargará de presentarle el nombre o significado completo.

La <acronym title="Fédération Internationale de Football Association">FIFA</acronym>,
es el órgano que rige el fútbol.

Código en el texto

Si eres diseñador o desarrollador y te has encontrado con la necesidad de escribir algún artículo para tu página web que explique el trabajo que realizaste, es muy probable que hayas tenido la necesidad de plasmar una parte de tu código, si lo hiciste de forma correcta utilizaste la etiqueta “code” para envolver dicho texto.

<code>
  Este es el código de un
  <strong>párrafo HTML</strong>
</code>

Si queremos que la indentación de dicho código se respete tenemos que introducirlo en un elemento de tipo “pre”, ya que por default HTML no toma como referencia los espacios en blanco o los tabs que agreguemos.

Y así como estás existen muchas otras clases de etiquetas muy específicas como “address” que nos sirve para especificar la dirección de un establecimiento, generalmente utilizado en la sección de contacto o “kbd” que sugiere la parte donde un usuario debería introducir texto.

Dar estilos a los textos con CSS

Ahora ya tenemos una amplia noción de como estructurar el texto con XHTML, pero esto no significa que llegamos al final del camino.

Si observamos los elementos que creamos por defecto con estas etiqueta, podremos darnos cuenta que no son para nada atractivos visualmente, por lo que es muy probable que deseemos darle un estilo para crear un mejor entorno.

Para ello vamos a recurrir a CSS para tomar el control de las fuentes, tamaños, colores y espacios.

Tipo de fuente

En muchos casos, el primer encuentro con el manejo de fuentes en un ordenador  se puede remontar a un procesador de texto, al momento de realizar nuestros trabajos o tareas utilizábamos ciertas fuentes para identificar los encabezados y el contenido, cada quien escogía el tipo que más se adecuaba al documento y a nuestros gustos.

La primera parte de esta propiedad que estudiaremos es “font-family”, con esta parte podemos definir que fuente o tipografía usaremos en el documento.

Por ello esta propiedad debe usarse relativamente poco, pero su importancia no disminuye para nada.

El valor de “font-family” puede ser el nombre de una fuente, el cual debe ir entre comillas, o también puede ser el nombre de varias fuentes separados por comas; de esta manera podemos crear un respaldo, en caso de que el navegador no pueda encontrar la fuente principal usará la siguiente en la lista.

Este respaldo es comúnmente utilizado por cuestiones de seguridad, existen ocasiones en que algunas fuentes tienen nombres diferentes en distintos sistemas operativos o simplemente la fuente que estamos utilizando es muy rara, por lo que se opta por utilizar fuentes genéricas como sans-serif o monospace para actuar en caso de que todas las demás fallen.

body { font-family: "Arial" }
.contenido { font-family: Arial, Helvetica, Sans-serif }

Tipografía en pantalla vs. tipografía impresa

La tipografía de las páginas web tienen diferencias sustanciales con la tipografía impresa.

La resolución de las tipografías de las páginas web está muy limitada por la cantidad de puntos por pulgada (ppp), que en los sistemas de impresión, aún los de menor resolución, son muy superiores.

Sin embargo, gracias al sistema “anti-alias” que los sistemas operativos aplican a sus fuentes, es posible mejorar la visibilidad de las mismas.

En la siguiente imagen, veremos una comparación de fuentes con y sin anti-alias.

El modo de renderizar este tipo de alineación no es óptima en pantallas de ordenador.

El navegador tiende a justificar el texto a costa de establecer espacios irregulares entre las palabras, algunas aparecen más juntas, otras claramente alejadas provocando saltos bruscos dentro de las frases lo que dificulta su lectura. Lo más usable es dejar el texto alineado a la izquierda.

Color del texto

La propiedad “color” ya fue mencionada anteriormente en nuestro manual, como su nombre lo indica sirve para establecer un color para un elemento, en este caso nos ayudará a determinar el color en que se mostrarán las letras del texto.

En cambio si lo que quisiéramos es cambiar el fondo del texto, entonces debemos utilizar la propiedad “background-color”, la cual únicamente se encarga de resaltar la parte que queda exactamente atrás del texto.

body {
  font-family: Arial, Helvetica, Sans-serif;
  color: white;
  background-color: blue;
}

Tamaño

Para definir el tamaño de la fuente tenemos a “font-size”, dicha propiedad recibe unidades de tipo píxel, em o porcentaje como valor, pero también tiene la particularidad de recibir cadenas de texto como “small”, “medium” y “large” las cuales establecen un valor predefinido para el tamaño, el cual puede variar según el navegador.

body {
  font-family: Arial, Helvetica, Sans-serif;
  color: white;
  background-color: blue;
  font-size: 12px;
}

.contenido{
  font-size: 80%;
}

Interlineado (line-height)

En muchas ocasiones existe la necesidad de ajustar la altura de la línea (interlineado) donde desplegamos el texto, para ello muchos recurren a modificar la fuente del texto, pero el proceso correcto sería utilizar la propiedad “line-height”.

Dicha propiedad nos permitirá crear un texto más legible al ajustar la línea de texto en elementos como párrafos.

p { line-height: 1.5; }

Otro aspecto que mejora la legibilidad y la estética, la utilización correcta de espacios en blanco. Establecer márgenes a los lados del texto sirve como método de establecer separación entre contenidos y proporciona alivio visual.

Para que el usuario no se canse de la lectura, es una buena medida establecer párrafos relativamente cortos y con espacios en blanco entre ellos, de forma tal que se produzca un descanso visual.

Otro factor que provoca cansancio visual y dificultades para encontrar la siguiente línea, es establecer anchos de párrafo de mucha longitud, siendo preferible que el texto se extienda más en lo vertical con anchos de línea más reducidos.

Negrita y cursiva

Si lo que queremos es establecer el grosor y la inclinación de nuestro texto entonces debemos recurrir a “font-weight” y “font-style” para definirlo.

La propiedad “font-weight” se encargará de definir el grosor de la fuente, los valores típicos para esto son “bold” que nos pondrá el texto en negritas y “normal” que lo regresará a una visualización común.

Por su parte, la propiedad “font-style” se usará para volver cursiva un tipo de letra, y por cursiva nos referimos a dar un formato itálico.

p { 
  font-weight: bold; 
  font-style: italic;
}

Mayúsculas y minúsculas

Una vez adentrado en la estilización del texto, podemos pasar a aspectos más específicos como por ejemplo el aspecto de cada letra, dentro de esto encontramos a las mayúsculas y minúsculas.

No obstante, hay propiedades CSS que sirven para cambira la forma del texto, estas propiedades son “font-variant” y “text-transform”.

En el caso de “font-variant” tenemos el calor “small-caps” que sirve para convertir un texto a pequeñas letras mayúsculas que no revasen la altura de una minúscula, es decir simplemente toman la forma.

Por otro lado “text-transform” nos permite jugar más con las letras, ya que con su propiedad “uppercase” podemos transformar todo el texto a mayúsculas o con “lowercase” convertirlas a minúsculas, y si lo que queremos es una palabra correctamente escrita entonces podemos usar “capitalize” que convierte a mayúscula únicamente la primera letra de la palabra.

h1 { text-transform: capitalize; }

Alineación

Finalmente, una vez que ya tenemos estilizadas las letras, podemos definir una alineación adecuada para mostrar nuestro texto.

Como en todo lo que es bidimensional, existen dos formas básicas de alinear, la horizontal y la vertical, siendo el primer caso el más fácil.

Para definir una alineación horizontal basta con utilizar la propiedad “text-align”, la cual se encargará de utilizar el elemento padre como marco para alinear el texto con alguno de sus 4 valores “left”, “right”, “center” o “justify”.

Esto se debe a que para el lector es más sencillo ubicar los principios de línea, lo que resulta mucho más difícil cuando el texto se encuentra alineado a la derecha, debido a la irregularidad de los comienzos de línea ubicados a la derecha.

Por otra parte, los textos justificados necesitan modificar el espacio entre palabras para que tanto los comienzos como los finales se encuentren alineados, como dijimos un poco más arriba, esto que provoca una fuerte asimetría que perjudica la lectura y la presentación de la página.

El código CSS para alinear el texto es el siguiente:

text-align: center; /* texto centrado */text-align: left; /* texto alineado a la izquierda, por defecto */text-align: right; /* texto alineado a la derecha */text-align: justify; /* texto justificado */

Por su parte el alineado vertical de textos es un poco más de trucos, podemos utilizar la propiedad “vertical-align” pero puede que los resultados no sean los esperados.

Los valores para esta propiedad son “middle”, “bottom”, “text-top”, “text-bottom”, “sub” y “super”.

p { vertical-align: middle; }

Propiedad Font

Existe una manera sencilla de reflejar todo los cambios que hemos realizado hasta el momento, y esta es la propiedad “font”.

Estos pequeños atajos son proporcionados por CSS para definir un gran número de estilos con poco código, y nos iremos encontrando con otros más conforme avancemos.

La manera de definir su valor es separar cada propiedad separada por un espacio, como se muestra aquí:

p { font: bold 12px/1.5 arial, helvetica, sans-serif; }

Tratamiento de textos para páginas web

El contenido más importante de todas las páginas web se encuentra en los textos, aún en aquellos casos en los que las imágenes ocupan un porcentaje mucho mayor respecto del espacio de la página.

Además, el tiempo de atención de los usuarios de Internet es diferente, siendo mucho más corta que en otros medios más tradicionales.

Estas características tan especiales de las páginas web, hace que la producción, disposición y la forma en que se presentan los textos, deba ser especialmente cuidada, ya que descuidar este aspecto podría provocar una pérdida de usuarios.

Consejos para formatear los textos en una web

• Cada párrafo, debe contener solo una idea. Esto agiliza notablemente la lectura y simplifica la comprensión del texto en general.
• Cada tema o subtema, debe estar separado del resto mediante la aplicación de subtítulos claros y que contengan información de utilidad sobre el contenido que los lectores encontrarán en los párrafos siguientes.
• La calidad de los textos debe ser muy alta. Simplicidad en la elaboración de frases y oraciones, buena sintaxis, ortografía sin errores y estilo cuidado.
• Todo texto debe estar iniciado por un título perfectamente visible, debe resultar llamativo y lo suficientemente explícito como para que los usuarios tengan una idea clara del tema tratado en los párrafos siguientes.
• Es necesaria la disposición del texto en párrafos, separados por un interlineado visible, de forma tal que un texto no de la impresión de tratarse de un gran bloque que nunca termina.
• Los párrafos deben ser cortos, ya que los bloques de textos de muchas líneas, hace que muchos usuarios se pierdan al cambiar de línea.
• Dentro de los párrafos, los conceptos más importantes y las palabras clave es conveniente que estén más visibles que el resto del texto, por lo que deben ir en negrita. No conviene abusar de esta técnica.
• En cambio, el subrayado es totalmente desaconsejado, ya que generalmente las palabras subrayadas suelen ser empleadas para los enlaces, lo que puede generar confusión en los usuarios.
• El texto en un solo color, suele ser monótono, lo que puede provocar que el usuario encuentre poco atractiva la propuesta. Por lo general, para hacer que el texto deje de ser algo monótono, basta con incluir colores diferentes a los títulos y subtítulos para que la apariencia general se muestre en forma atractiva.
• Dotar de buen contraste del texto sobre el fondo sobre el cual se encuentra. Esto es particularmente importante en el caso de las páginas que tienen imágenes como fondo, ya que en esos casos, la lectura es aún más compleja que en las páginas que tienen un color sólido de fondo.
• No utilizar efectos en los textos. Los efectos de marquesina, el texto parpadeante o textos móviles logrados con algunos js, por lo general deben ser evitados, ya que tienen efectos contraproducentes.
• Usar un máximo de tres fuentes diferentes y dos o tres colores para el texto.
• Hacer que los enlaces se distingan muy bien del resto del texto.
• Usar un espaciado apropiado entre líneas, párrafos, títulos y subtítulos, sangrías, etc.

Espero que con estas técnicas y buenas prácticas en el uso de texto en la web, puedas crear una web que sea fácil de consumir por el usuario.