A drop cap is an enlarged capital letter at the start of a paragraph. It adds emphasis and gives a page a decorative touch. The technique has roots in illuminated manuscripts and print, but it works in web typography too. section 7.0
To make one without changing the HTML, select the first letter of the first paragraph with `p:first-of-type::first-letter`. The pseudo-class finds the paragraph; the pseudo-element targets its initial letter. section 7.1.3
Style that letter in three steps:
- Increase `font-size` and choose a display typeface to make the initial stand out. Keep ornate fonts to short pieces of text, where they are easier to read. section 7.1.3
- Adjust `line-height` so the larger glyph sits comfortably beside the paragraph. section 7.1.3
- Set `float: left` so the following text wraps alongside the letter rather than simply continuing after it. section 7.1.3
An opening paragraph
For an excerpt from The Call of the Wild, the rule `p:first-of-type::first-letter { font-size: 6em; float: left; line-height: .5; font-family: 'Passions Conflict', cursive; }` turns the first paragraph’s B into a drop cap. Font sizes and line heights may need adjusting for another typeface: glyphs do not all appear the same size at the same CSS value. section 7.0 section 7.1.3 section 7.5
Listing 7.4 Styling and positioning the first letter of the first paragraph
@import url(
'https:/ /fonts.googleapis.com/css2?
family=Passions+Conflict&display=swap' #1
);
p:first-of-type::first-letter { #2
font-size: 6em; #2
float: left; #2
line-height: .5; #2
font-family: 'Passions Conflict', cursive; #2
} #2
The complete CSS listing includes the font import and the rule that selects, enlarges, and floats the initial letter. section 7.1.3
