Dropcap Characters
Large decorative initial letters for paragraph beginnings.
Basic Dropcap
O nce upon a time, in a land far away, there lived a designer who loved typography. They spent their days crafting beautiful letterforms and experimenting with various typographic techniques.
<p style="line-height: 1.7">
<span
class="ss-c-dropcap"
style="
float: left;
font-size: 4em;
line-height: 0.8;
margin-right: 12px;
margin-top: 4px;
font-weight: bold;
color: var(--color_text_primary);
"
>
O
</span>
nce upon a time, in a land far away, there lived a designer who
loved typography. They spent their days crafting beautiful
letterforms and experimenting with various typographic techniques.
</p>Dropcap Styles
T he boxed dropcap style adds a colored background behind the initial letter, making it stand out as a distinct design element within the text flow.
A circular dropcap creates a softer, more organic feel. This style works particularly well for editorial content and magazines where a refined aesthetic is desired.
I n the outlined style, the dropcap is rendered with just a stroke, creating an elegant and modern look that doesn't overpower the surrounding content.
<div style="display: grid; gap: 32px">
<!-- Square Background -->
<p style="line-height: 1.7">
<span
class="ss-c-dropcap ss-c-dropcap--boxed"
style="
float: left;
font-size: 3em;
line-height: 1.2;
margin-right: 12px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color_text_primary);
color: white;
border-radius: 8px;
"
>
T
</span>
he boxed dropcap style adds a colored background behind the
initial letter, making it stand out as a distinct design
element within the text flow.
</p>
<!-- Circular Background -->
<p style="line-height: 1.7">
<span
class="ss-c-dropcap ss-c-dropcap--circle"
style="
float: left;
font-size: 2.5em;
line-height: 1.4;
margin-right: 12px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color_fill_secondary);
border-radius: 50%;
"
>
A
</span>
circular dropcap creates a softer, more organic feel. This
style works particularly well for editorial content and
magazines where a refined aesthetic is desired.
</p>
<!-- Outlined -->
<p style="line-height: 1.7">
<span
class="ss-c-dropcap ss-c-dropcap--outlined"
style="
float: left;
font-size: 4em;
line-height: 0.8;
margin-right: 12px;
margin-top: 4px;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px var(--color_text_primary);
"
>
I
</span>
n the outlined style, the dropcap is rendered with just a
stroke, creating an elegant and modern look that doesn't
overpower the surrounding content.
</p>
</div>Decorative Dropcaps
G radient dropcaps add a modern touch with smooth color transitions. This technique is popular in digital publications and web design.
S erif dropcaps evoke a classic, timeless feel reminiscent of traditional book typography. They work beautifully in literary content.
<div style="display: grid; gap: 32px">
<!-- Gradient -->
<p style="line-height: 1.7">
<span
class="ss-c-dropcap ss-c-dropcap--gradient"
style="
float: left;
font-size: 4.5em;
line-height: 0.75;
margin-right: 14px;
margin-top: 6px;
font-weight: 900;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
"
>
G
</span>
radient dropcaps add a modern touch with smooth color
transitions. This technique is popular in digital publications
and web design.
</p>
<!-- Serif Style -->
<p style="line-height: 1.7">
<span
class="ss-c-dropcap ss-c-dropcap--serif"
style="
float: left;
font-size: 5em;
line-height: 0.7;
margin-right: 10px;
margin-top: 8px;
font-family:
Georgia, "Times New Roman", serif;
font-style: italic;
color: var(--color_text_primary);
"
>
S
</span>
erif dropcaps evoke a classic, timeless feel reminiscent of
traditional book typography. They work beautifully in literary
content.
</p>
</div>