Creación de letras iniciales Parte III: Ajuste y diversión

En la Parte I y en la Parte II de esta serie sobre las letras iniciales, vimos las iniciales en relieve que se sitúan en la línea de base y las iniciales caídas (también llamadas versalitas) que se sitúan por debajo de la línea de base. En esta última entrega, no sólo profundizaremos en la comprobación y el ajuste de las iniciales en relieve y las letras mayúsculas en los navegadores mediante HTML y CSS, sino que también estudiaremos formas expresivas de utilizar Web fuentes.

Antes de llegar a la parte divertida, es importante repasar los fundamentos de la configuración de las letras iniciales en la tipografía Web. Tienes que ajustar las propiedades tipográficas en el backend para aumentar el tamaño de tu letra inicial y colocarla donde quieras, y puedes usar un clase o pseudoclase para realizar cambios en: fuente, fuente tamaño, mayúsculas, interlineado (altura de línea), márgenes, relleno y flotante (para mayúsculas desplegables).

También puede ajustar el peso y el color, así como el estilo, ya sea cursiva o negrita, o negrita e cursiva. Y todas esas propiedades tienen que ajustarse una a una para que se reproduzcan de forma coherente en los distintos navegadores.

Pruebas y ajustes

Para ofrecer una experiencia de usuario coherente, tendrás que probar y ajustar tus letras iniciales en distintos navegadores: Safari® de Apple, Chrome® de Google, Explorer® o Edge® de Microsoft y Mozilla Firefox®, entre otros. He aquí un ejemplo de lo que ocurre cuando un navegador funciona, pero otros muestran las cosas de forma diferente.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 32px; line-height: 70px; margin-bottom:48px;}

p:first-child::first-letter { font-family: Georgia, serif; font-size: 280px; 198px; float: left; text-transform: uppercase; padding: 0px 15px 0px 5px; color:#F69; z-index:10; margin-top:–10px;}

em { color:#930;}

<p>And here is a drop cap <em>A</em> that sits below its own line, and two lines deep. The <em>A</em> is colored to make it stand out for this visual. But there’s a problem. Across two browsers things look wrong. So what has to be adjusted to fix it?</p>

Fíjese en la diferente colocación de la letra "A" de Georgia®en las capturas de pantalla siguientes. En Firefox se ve correctamente, pero en Safari y Chrome se ve mal.

Diseño roto en Safari.

Diseño roto en Chrome.

El diseño en Firefox, tal y como lo queremos.

A primera vista, parece que acolchado o margen lanza de descuento el diseño. Pero juguetear con esos ajustes no nos da la solución correcta. El examen de los diseños de Chrome y Safari desde el punto de vista de la alineación, especialmente cuando se trata de la línea de base, nos dice que algo está de descuento con el interlineado, es decir, CSS altura de línea. Después de algunos experimentos, encontramos una solución para la altura de línea y la anotamos en los comentarios CSS para futuras referencias.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 32px; line-height: 70px; margin-bottom:48px;}

p:first-child::first-letter { font-family: Georgia, serif; font-size: 280px; /* line-height added for Safari and Chrome fix but will not impact Firefox */ line-height: 198px; float: left; text-transform: uppercase; padding: 0px 15px 0px 5px; color:#F69; z-index:10; margin-top:–10px;}

em { color:#930;}

Obtenemos lo que queremos en los tres navegadores con la función altura de línea incluido. Chrome y Safari reconocen el altura de línea ajuste. En Firefox, añadiendo el altura de línea no hay ninguna diferencia, y el diseño sigue siendo el que queremos.

¿Píxeles o Ems?

Dimensionar todo su tipo en ems ofrece una ventaja significativa: el tipo de letra aumentará o disminuirá de tamaño en pantallas de diferentes tamaños, como un smartphone, una tableta, desktop, o incluso un televisor, y en la mayoría de los casos no tendrá que complicarse añadiendo JavaScript™ para tener en cuenta esos diferentes viewports. Pero cuidado: si utiliza ems para ajustar el tamaño de la tipografía, es posible que se encuentre con diseños incoherentes en los distintos navegadores y que tenga que ajustarse a décimas y centésimas de milímetro. em en un intento de conseguir que las cosas se vean bien. Y, pase lo que pase, el diseño puede parecer un poco "de descuento" o estar completamente roto.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:12em;}

p { font-size: 1em; line-height: 2em; }

p:first-child::first-letter { font-family: Didot, serif; font-size: 9em; text-transform: uppercase; margin:0.07em 0.07em 0.07em –0.05em; line-height: 0.755em; float:left;}

em { color:#930;}

<p>So let’s take a look at setting this in ems to see what our drop cap <em>S</em> does when it comes to using the line-height property to make adjustments and fixes across browsers. Is it as easy as adding the line-height property, and having it look correct in Chrome and Safari? The only way to find out is through some testing, and trial and error. Unfortunately, once you set your initial letter, and choose a typeface, you will have to test it out across as many browsers as possible to make sure that it looks correct and looks the way you want.<p>

Con el CSS anterior, podemos colocar la letra "S" de Didot®donde queremos en Firefox, pero en Safari y Chrome lo mejor que podemos hacer sin romper todo el diseño es que la "S" flote ligeramente por encima de la línea de base a la que queremos alinearla.

Firefox nos da la alineación que queremos.

Pero Safari y Chrome necesitarán muchos más ajustes para conseguirlo.

Alternativamente, la tapa de la gota podría sentarse dentro de una mayor cantidad de espacio en blanco para añadir drama, dándonos más margen de maniobra cuando se trata de hacer ajustes con márgenes y altura de línea. El diseño aún necesita algunos retoques para obtener la alineación básica deseada.

Si los constantes ems en el CSS todavía no le da los resultados que desea con sus iniciales en relieve o mayúsculas, podría ser más fácil pasar a píxeles para dimensionar toda su tipografía. Incluso entonces, podría utilizar un meta para ajustar el contenido de la ventana gráfica para escalar hacia arriba o hacia abajo, dependiendo del tamaño de la pantalla. Pero la mayoría de las veces, son los drop caps los que hacen que el dimensionamiento con ems difícil, en cuyo caso, podría conformarse con iniciales en relieve en su lugar.

Tamaño, peso y colocación

Una vez que conozcas la mecánica del backend y lo que hace falta para que funcione en todos los navegadores, puedes divertirte un poco. Con Web fuentes tienes una gran variedad de tipos de letra entre los que elegir para que tus iniciales sean llamativas y expresivas. Y también puedes divertirte con el diseño.

Todos los ejemplos siguientes se han creado con el software Typecast™de Monotype y su editor CSS.

H" en el tipo de letra Shadow Gothic™. Observe cómo el blanco de la letra -no la sombra negra- está alineado con la línea de base de la segunda línea.

S" en el tipo de letra Aachen®.

Inicial "T" en relieve en el tipo de letra Aachen.

T mayúscula en el tipo de letra Aachen.

Puede colgar la tapa de la gota hacia fuera en el margen, haciendo una medida más amplia para el texto de la sección.

Para un aspecto poco convencional, puedes alterar la colocación y la alineación de la "O". Hazla grande y sal del margen para crear asimetría.

Pero si lo suyo no es ir a lo grande, considere añadir algo de decoración con guiones, como el tipo de letra ITC Bodoni™ Seventytwo Swash. En este caso, la postura de la "H" está tan inclinada hacia delante que deja una extraña cantidad de espacio negativo entre la "H" y las líneas segunda y tercera del tipo.

Esta "A" en forma de guillotina ITC Bodoni Seventytwo Swash sería mejor de descuento con la "nd" más cerca, pero desgraciadamente no podemos hacer este tipo de retoques con la tipografía web.

Colocar un capitular con un carácter de guion que tenga un aspecto más atrevido, como el tipo de letra Swashbuckler™. Si le han llamado la atención los ejemplos con guiones, no se pierda el próximo artículo para saber más sobre los guiones en la Web.

Avanzando con las letras iniciales

La tipografía en la Web mejora constantemente gracias a los avances en los navegadores y a la evolución de los estándares CSS y HTML. Pero nos queda mucho camino por recorrer, sobre todo en lo que se refiere a la especificación y composición de las letras iniciales en el backend. No hay una forma estándar de establecer las letras iniciales en la Web, al menos no hay un conjunto estándar de clases en CSS. En su lugar, cada cual tiene que desarrollar sus propios métodos, o adoptar los que otros han creado hasta que se publique la siguiente oleada de estándares Web.

Dimensionamiento absoluto en píxeles parece funcionar mejor en todos los navegadores en comparación con el dimensionamiento de las letras iniciales con ems. Pero si tuviéramos que implementar JavaScript™ para gestionar la visualización y el tamaño a través de diferentes navegadores y viewports, entonces hay una buena probabilidad de que pudiéramos hacerlo bien con ems. Las mayúsculas son las que plantean más problemas de maquetación y coherencia, ya que hay que ajustar más factores: altura de línea, flotación, márgenes y relleno. Así que, a la hora de diseñar tus propias páginas, si te encuentras en un callejón sin salida con las mayúsculas, puedes optar por las iniciales en relieve, que son más fáciles de implementar.

Esperemos que pronto veamos nuevas normas HTML y CSS que permitan una mejor designación y manejo de las iniciales en relieve y las mayúsculas. Hasta entonces, hay que seguir experimentando y trabajando en ello. Y recuerda también divertirte buscando, eligiendo y utilizando la tipografía.