Cómo hacer letras iniciales Parte II: Iniciales caídas

Tanto las iniciales en relieve como las iniciales esdrújulas pueden dar un toque especial a un sitio web, proporcionando a los lectores una letra monumental con la que iniciar la experiencia de lectura. Después de haber aprendido sobre las iniciales en relieve y su estilo para la Web en la Parte I de esta serie, los lectores deberían estar listos para pasar a los retos más grandes que les esperan con las iniciales caídas, comúnmente conocidas como drop caps.

HTML y CSS, sin JavaScript

A lo largo de esta serie de letras iniciales, nos hemos planteado el reto de representar las iniciales en relieve y las letras mayúsculas utilizando únicamente HTML y CSS, sin JavaScript™ para consultas de medios en pantallas pequeñas y grandes o para ajustar dinámicamente el tamaño y el interlineado de los caracteres. Aunque JavaScript podría ser útil, no utilizarlo nos permite desplegar una solución ligera con menos recursos y un diseño que no tendrá problemas si el usuario tiene JavaScript desactivado.

Al igual que las iniciales en relieve, las versalitas son más fáciles de crear y gestionar con un CSS independiente en el que se designan fuente, el tamaño, la altura de línea (interlineado) y el estilo. Pero con las mayúsculas, se añade una propiedad float. Utilizaremos first-child y primera letraal igual que en la Parte I de esta serie, para generar automáticamente las drop caps sin tener que añadir etiquetas span en el HTML.

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

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

p:first-child::first-letter { font-family: Didot; font-size: 10.2em; float: left; text-transform: uppercase; margin-top:0.13em; margin-right:0.05em; margin-left:-0.03em; }

em { color:#930;}

<p>here is a conventional drop cap sized large, and sitting beneath the first line of text. The top of the <em>H</em> aligns with the top of the first line of text, but the bottom of the <em>H</em> aligns with a lower baseline.</p>

En H actúa como el tapón de caída debido a la primer-hijo::primera-letra asignación y estilo de mayúsculas. Gracias a la Didotpuede mantenerse en pie sin que las gracias pesen sobre el diseño.

Crear versalitas y alinearlas dentro de los límites rectangulares del texto que las rodea, como se muestra más arriba, es sólo un método. Se trata de un método elegante que recuerda a algunos de los métodos más tradicionales utilizados en el diseño impreso. Pero esto no es diseño impreso -es diseño web- y, aunque las convenciones son útiles, se pueden romper siempre que se mantengan la legibilidad y la legibilidad para que la experiencia del usuario sea positiva.

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

p { font-size: 2em; line-height: 4em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 8em; float: left; text-transform: uppercase; margin-top:0.08em; margin-right:0.1em; margin-left:–0.03em; }

em { color:#930;}

<p>here is a drop cap created with a pair of pseudo-classes. Note how the next line of type flows underneath the letter <em>H</em>, effectively wrapping around the drop cap. The negative-left margin helps align the serif of the <em>H</em> with the paragraph. A little bit of math and testing helps us align the base of the <em>H</em> with the second line of our paragraph.</p>

<p>With a new paragraph created, we get a normal-sized <em>W</em> at the beginning of the sentence.</p>

Esta letra mayúscula se alinea con la línea de base, pero se arrastra por encima de la primera línea de texto. Aunque la H de la letra capital no necesita ir en mayúscula en el HTML, ya que el CSS la pone en mayúscula, fíjate en que el segundo párrafo necesita que la W vaya en mayúscula.

Ya hemos visto lo que ocurre cuando se rompe la línea de remate de la primera línea de texto, ahora vamos a ver qué pasa si el remate rompe una línea de base. Sí, alinear las versalitas con la línea de base se considera una práctica aceptable e incluso tradicional en el diseño impreso, pero vamos a mezclar las cosas y divertirnos un poco. Al fin y al cabo, esto es la Web.

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

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

p:first-child::first-letter { font-family: Didot; font-size: 6em; float: left; text-transform: uppercase; color:#066; margin-left:–0.15em; margin-top:–0.1em}

em { color:#930;}

<p>over here is a drop cap with a negative left margin hanging the drop cap outward, optically aligning the <em>O</em>. You can even change the color, to make it lighter than your body text, so it recedes into the background. Ordinarily, you&rsquo;ll only need one drop cap, oftentimes placed at the very beginning of your text section. But, if you want to have a raised cap or drop cap in a pull quote, you&rsquo;d need a separate class.</p>

Puede hacer que la letra capital se adhiera a la cuadrícula base o que la rompa. Pero ten siempre en cuenta la experiencia del usuario y asegúrate de que el texto sea legible. Experimenta con la alineación vertical y la altura de línea, y también con el color, para que la tapa desplegable parezca grande sin dominar el diseño.

Cuidado con los detalles

Cada letra capitular debe tratarse de forma diferente en cuanto a tamaño, interlineado (altura de línea) y márgenes, ya que cada letra tiene un aspecto diferente y cada tipo de letra es diferente. Con una oferta casi ilimitada de páginas web Fuentes disponibles para tus drop caps, esto puede complicar las cosas. Tendrás que modificar el espaciado y el tamaño, haciendo ajustes hasta que quede perfecto. Y si eliges otro tipo de letra, puede que tengas que empezar de cero con esos ajustes. Pero aún hay más: Aunque se vea bien en un navegador, es posible que te encuentres con complicaciones en otro.

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

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 8em; float: left; text-transform: uppercase; margin-top:–0.12em; margin-right:0.1em; margin-left:–0.03em; }

em { color:#930;}

<p>and here is a drop cap <em>A</em> set among body text with less leading, known as line-height in CSS. The drop cap still aligns to the second line of text, but the first line could benefit from some kerning.</p>

A primera vista, la escultural gorra Didot parece elegante, pero a medida que lea la primera línea del párrafo -o más exactamente, tropiece con la primera palabra- más le molestará el hueco de la palabra Y.

Puede utilizar márgenes negativos para eliminar el espacio entre letras y cerrar los huecos. Observe la diferencia entre la propiedad margin-right del ejemplo anterior y la que aparece a continuación, así como el diseño resultante.

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

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: Didot; font-size: 6em; float: left; text-transform: uppercase; margin-top:–0.25em; margin-left:–0.01em; margin-right:–0.1em;}

em { color:#930;}

<p>and here is a drop cap <em>A</em> that sits ever so gently below the baseline, and it has better kerning between the <em>A</em> and the <em>nd</em> that follows. The sacrifice? We had to make the drop cap smaller and perform some calculations to get the kerning just right.</p>

Con una propiedad margin-right negativa, el Y se cierra, y se lee mejor, pero hemos tenido que hacer flotar la tapa de la gota entre líneas de base.

A pesar de que se ve bien en el navegador Firefox™ como se ve en el ejemplo anterior, Chrome™ de Google, que se muestra aquí, mostrará una imagen arrugada y con un aspecto terrible como resultado de la propiedad de margen derecho negativo.

Podríamos hacer un par de cosas para tener en cuenta las diferencias de representación entre navegadores. Podríamos cambiar al tamaño absoluto, utilizando píxeles en lugar de ems, para ver si podemos gestionar mejor el espaciado, y de una manera más precisa. O podríamos buscar otro tipo de letra para ver qué resultados obtenemos. Hemos llegado hasta aquí con las ems, así que tomemos el camino de menor resistencia, y consideremos un tipo de letra que tenga menos angulosidad, ya que el espaciado entre letras es el problema que queremos resolver. Abandonaremos la familia Didot en favor de algo más cuadrado, como el tipo de letra ITC Bauhaus®.

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

p { font-size: 2em; line-height: 3em; margin-bottom:3em;}

p:first-child::first-letter { font-family: "Bauhaus W01 Heavy"; font-size: 9em; float: left; text-transform: uppercase; margin-top:–0.14em; margin-right:0.01em; margin-left:–0.05em; }

em { color:#930;}

<p>and here the drop cap is set in the ITC Bauhaus typeface, which has a more rectangular <em>A</em> that aligns with its surrounding text cleanly.</p>

Si un tipo de letra no funciona, prueba con otro. Un gorro ITC Bauhaus fuerte y atrevido le da otro sabor a las cosas, y se alinea mejor con su entorno aquí en el navegador Firefox.

Exactamente el mismo HTML y CSS se muestra un poco diferente aquí en Chrome. Sí, se ha mejorado el espaciado entre letras entre la A y la nd, pero la altura de línea y los márgenes se muestran de forma diferente.

Trabajo en curso

Los ejemplos mostrados aquí y en la Parte I se basan en HTML y CSS, sin JavaScript. Y aunque el uso de JavaScript para ajustar dinámicamente los pequeños detalles podría resultar útil, con el tiempo podríamos ver un mejor manejo de las letras iniciales en la tipografía web. Cuando se implementen los nuevos estándares HTML y CSS, y se puedan utilizar en los navegadores web, podrían permitir una designación más sencilla tanto de las iniciales en relieve como de las mayúsculas sin pseudoclases y sin JavaScript en el backend. Pero incluso entonces, es muy probable que haya que realizar pruebas rigurosas en todos los navegadores.

En la Parte III de esta serie de Cartas Iniciales, nos adentraremos en las pruebas entre navegadores utilizando HTML y CSS, el dimensionamiento con píxeles y la resolución de problemas de los navegadores utilizando altura de línea y acolchado. También profundizaremos en la Web Fuentes y daremos un toque especial a los diseños con guiones drop cap y swashes, así como con el infame supertamaño letra inicial. Experimentar con distintos tipos de letra hasta dar con el adecuado para la letra inicial -y que sea coherente en todos los navegadores- forma parte de la diversión. Y también lo es buscar el fuente adecuado. Disfruta del proceso.