Making Initial Letters Part III: Fine Tuning & Fun

In Part I and Part II of this Initial Letters series, we looked at raised initials that sit on the baseline and dropped initials (also called drop caps) that sit below the baseline. In this final installment, not only will we dive deeper into testing and adjusting raised initials and drop caps across browsers using HTML and CSS, but we’ll also look at expressive ways to use Web fonts.

Before getting to the fun part, it’s important to review the basics of setting initial letters in Web typography. You have to adjust typographic properties in the backend to increase the size of your initial letter and position it where you want it, and you can use a class or pseudo-class to make changes to: font, font size, case, leading (line-height), margins, padding, and float (for drop caps).

You can also adjust weight and color, as well as the style, be it italic or bold, or bold and italic. And all of those properties have to be adjusted one by one to render consistently across different browsers.

Testing and Adjusting

To deliver a consistent user experience, you’ll have to test and adjust your initial letters in different browsers: Apple’s Safari®, Google’s Chrome®, Microsoft’s Explorer® or Edge®, and Mozilla Firefox®, among others. Here’s an example of what happens when one browser works, but others display things differently.

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>

Notice the different placement of the Georgia® typeface ‘A’ in the screen captures below. Firefox looks correct, but Safari and Chrome render it wrong.

Broken layout in Safari.

Broken layout in Chrome.

The layout in Firefox, as we want it.

At first glance, it would appear that padding or margin throws off the layout. But tinkering with those settings doesn’t give us the right solution. Examining the Chrome and Safari layouts from an alignment standpoint, especially when it comes to the baseline, tells us that something’s off with the leading, aka CSS line-height. After some experimentation, we find a line-height fix, and note it in the CSS comments for future reference.

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;}

We get what we want across the three browsers with the line-height included. Chrome and Safari recognize the drop cap’s line-height adjustment. In Firefox, adding the line-height makes no difference, and the layout stays the way we want it.

Pixels or Ems?

Sizing all of your type in ems offers a significant advantage: the type will size up or down across different sized screens, such as a smartphone, tablet, desktop, or even a television, and in most cases you won’t need to fuss with adding JavaScript™ to account for those different viewports. But beware: if you use ems to size your typography, you might run into inconsistent layouts across browsers, and you might find yourself trying to adjust for tenths and hundredths of an em in an attempt to get things to look right. And no matter what, the layout may look a little bit “off” or appear completely broken.

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>

Using the CSS above, we’re able to seat the Didot® typeface ‘S’ where we want it in Firefox, but in Safari and Chrome the best we can do without breaking the whole layout is having the ’S’ float ever so slightly above the baseline we want it aligned to.

Firefox gives us the alignment we want.

But Safari and Chrome will take a lot more adjusting to get it just right.

Alternatively, the drop cap could be seated within a larger amount of white space for added drama, giving us more wiggle room when it comes to making adjustments with margins and line-height. The layout still needs some fine-tuning to give us the baseline alignment we want.

If constant fussing with ems in the CSS still doesn’t give you the results you want with your raised initials or drop caps, it might be easier to move to pixels for sizing all of your typography. Even then, you could still use a meta tag to adjust the viewport contents to scale up or down, depending on the screen size. But most of the time, it’s the drop caps that make sizing with ems difficult, in which case, you could settle for raised initials instead.

Size, Weight, and Placement

Once you know the backend mechanics and what it takes to make things work across browsers, you can have a little fun. With Web fonts you have a variety of typefaces to choose from to make your initial letters eye-catching and expressive. And you can have fun with the layout too.

All examples below were rendered with Monotype’s Typecast™ software and its CSS editor.

‘H’ set in the Shadow Gothic™ typeface. Note how the white of the letterform— not the black shadow—is aligned to the second line’s baseline.

‘S’ in the Aachen® typeface.

Raised initial ‘T’ in the Aachen typeface.

Drop cap ‘T’ in the Aachen typeface.

You can hang the drop cap out into the margin, making for a wider measure for the section text.

For an unconventional appearance, you can alter the placement and alignment of the ‘O.’ Go big, and go out of the margin to create asymmetry.

But if going big isn’t your thing, consider adding some decor with swashes, like the ITC Bodoni™ Seventytwo Swash typeface. In this case, the posture of the ‘H’ is so forward leaning that it leaves an odd amount of negative space between the ‘H’ and the second and third lines of type.

This drop cap ITC Bodoni Seventytwo Swash ‘A’ would be better off with the ‘nd’ closer to it, but unfortunately we can’t make these kinds of refinements with Web typography.

Setting a drop cap with a swash character that has an edgier look, like the Swashbuckler™ typeface. If the examples with swashes got your attention, be sure to check back for the next post to learn more about swashes on the Web.

Making Strides with Initial Letters

Typography on the Web is always improving thanks to advances in Web browsers, and developments made to CSS and HTML standards. But we have a long way to go, especially when it comes to specifying and composing initial letters in the backend. There’s no standard way to set initial letters on the Web, at least there’s no standard set of classes in CSS. Instead, individuals have to develop their own methods, or adopt those others have created until the next wave of Web standards are released.

Absolute sizing in pixels seems to work better across browsers compared to sizing initial letters with ems. But if we were to implement JavaScript™ to manage display and sizing across different browsers and viewports, then there’s a good chance that we could get it right with ems. Drop caps present the most layout and consistency challenges since you have to adjust more factors: line-height, float, margins, and padding. So when it comes to designing your own pages, if you reach a dead end with drop caps, you could go with raised initials instead, which are easier to implement.

Hopefully we will see new HTML and CSS standards soon, allowing for better designation and handling of raised initials and drop caps. Until then, you have to keep experimenting and working at it. And also remember to have fun finding, choosing, and using the typography.