How do you create a drop cap effect?

Difficulty: 3/10

::first-letter pseudo-element, float layout, responsive design

Creating a Drop Cap Effect with CSS

A drop cap is a large initial letter at the beginning of a paragraph that spans multiple lines, commonly used in print and digital typography to draw attention to the opening text.

Steps to Create a Drop Cap

1
Use the ::first-letter pseudo-element to target the first character of the paragraph.
2
Increase the font-size to make the initial letter larger than the body text.
3
Use float: left; to allow the text to wrap around the drop cap.
4
Add line-height and adjustments to align the drop cap with the surrounding text.

Example: Simple Drop Cap

In this example, the first letter of the paragraph becomes a prominent drop cap. The text wraps naturally around it, creating a visually appealing typographic effect.

Best Practices

1
Ensure the drop cap size does not disrupt readability of the paragraph.
2
Use contrast and color to make the drop cap stand out without being distracting.
3
Test across different screen sizes to maintain proper alignment.
4
Combine with line-height and margin for smooth integration with surrounding text.
5

Scenario Questions

0-2 years experience

Follow-up Questions