Ortotipografía para la web

Wikilengua

La ortotipografía para la web presenta características especiales en la medida en que algunas reglas tradiciones no se aplican de modo automático por los navegadores sino de modo explícito mediante el marcado apropiado del archivo HTML.

HTML suele usarse en conjunción con CSS, que proporciona mecanismos para definir el formato de presentación del texto y otros elementos de las páginas. CSS puede usarse para reajustes ortotipográficos que permiten la aplicación de las normas ortográficas y diversas recomendaciones de estilo. Los estilos de CSS se pueden aplicar a una palabra o un grupo de palabras mediante el elemento span.

Dado que no todos los programas interpretan por igual los códigos y pueden tener configuraciones personales, además de haber diferencias en pantallas, sistemas, etc., algunos reajustes tienen que pasar muchas veces por pruebas en diversos entornos, para comprobar su adecuación.

Índice

[Modificar solo esta sección] Espacio de no división

Este espacio se puede obtener en HTML con la entidad &nbsp. Este espacio puede usarse, por ejemplo, entre cifras y los símbolos que le siguen. Por ejemplo:

<p>El margen es del 10&nbsp;%, aunque puede llegar al 12&nbsp;%.</p>

También es útil en abreviaturas como EE. UU. o cuando una cifra sigue a una palabra como página, piso, capítulo, etc.

En los EE.&nbsp;UU. vive en el piso&nbsp;87.

[Modificar solo esta sección] Espacio fino

El espacio fino también se puede obtener directamente en HTML con la entidad &thinsp;. Este espacio no evita el salto de línea, pero puede conseguirse este efecto con CCS y el valor nowrap de la propiedad white-space. Esta función es particularmente útil en los números, pues la separación de miles debería ser un espacio fino de no división:

Se analizó el ADN de <span style="white-space:nowrap">75&thinsp;000</span> personas.

Recuérdese que también se puede definir una clase en un archivo css externo. Por ejemplo, en el .css:

.num { white-space:nowrap; }

Y en el archivo HTML:

Se analizó el ADN de <span class="num">75&thinsp;000</span> personas.

[Modificar solo esta sección] Espaciado con cursivas

Ciertos estilos establecen que los signos de puntuación han de ir cursiva si la palabra a la que van unidos también va en cursiva, pero otros en cambio recomiendan que vaya en redonde si ese es el estilo que corresponde a la oración en la que están.

Mientras que los programas de maquetación reajustan el espacio de modo automático en textos impresos o en PDF, los navegadores rara vez hacen reajustes tipográficos de este tipo y una letra en cursiva puede superponerse a un paréntesis o un punto y coma que le siga, si este último va en redonda. Con las propiedades margin o padding (y sus variantes margin-left, margin-right, etc.) puede añadirse algo de espacio a los lados del signo:

... una forma de <em>downshifting</em><span style="margin-left:.1em">;</span> sin
embargo, perdemos unos...

Una alternativa, que requiere que el código HTML esté pulido y bien construido, es añadir sistemáticamente un espacio al final de todo texto en cursiva. Si el elemento usado es em, el archivo de estilo puede contener (el valor exacto puede variar):

em { margin-right: .1em; }

Incluso si el reajuste no fuera el tipográficamente deseable, a menudo puede mejorar, al menos, un poco la apariencia.

[Modificar solo esta sección] Interlínea

Las mayúsculas con acentos pueden presentar problemas si la interlínea, es decir, la distancia entre dos líneas, es pequeña (de modo que el acento gráfico puede tocar los descendentes de letras como g o q en el renglón superior). La interlínea se puede ajustar con la propiedad de CSS line-height. Una forma simple de aumentarla es con un porcentaje:

p { line-height: 120%; }

Hay más métodos, como dar el tamaño y el cuerpo de una vez al estilo clásico en font-size:

p { font-size: 15px/1.4em; }

Aquí, em es un cuadratín en el tamaño de fuente seleccionado (en este caso equivale a 140%). Este artículo fue seleccionado como destacado en 2015-10-26.

Supervisado
Herramientas personales

¿Quieres colaborar y no sabes cómo editar un artículo o no te atreves? Ve a la página de propuestas, escribe y hacemos el resto.

Véase también

La Wikilengua usa cookies para analizar las visitas según se indica en «Protección de datos». Si sigue navegando se entiende que las acepta.

Categorías
Compartir

Sindicación

RSSAtom

Licencia

CC-BY-SA

Acerca de...

Wikilengua
Protección de datos

Fundéu BBVA
Fundéu en Twitter
#EscribirEnInternet

Powered by MediaWiki