Drop Caps and Paragraph Text Effects Using CSS3
Websites have become a medium of sharing information with the entire world. This has transitioned to include media like photos and videos. But text on a webpage is still the predominant choice for web publishing. This would imply that how you structure paragraphs, sentences, and text on the page can greatly impact if a visitor chooses to stick around and read what you have to say.
In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. Legibility and font choices are often directly related to the design itself. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page. Take a peek at my live sample demo to see what we’re trying to build.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
General Page Setup
I’ve created a typical HTML5 doctype along with a fixed center content area. The paragraph styles are meant to appear in conjunction with other page elements, like a notification box or blockquote. You can say a lot in writing without using any secondary headers on the page.
My stylesheet is fairly basic with a number of CSS resets and positioning. Each paragraph element is styled with ems using an extra margin at the bottom. You can also see how I’ve created the h1 tag using horizontal borders positioned evenly in the center.
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
p {
display: block;
font-size: 1.35em;
line-height: 1.5em;
margin-bottom: 22px;
}
I’ve chosen to use “Helvetica Neue” as the primary font over the entire page. This is a sans-serif alternative to Helvetica but it shouldn’t limit typography choices for special page items.
Before we jump into the effects it is worth glossing over the HTML. Look at some of the class names and the various elements I’ve used for different purposes within each paragraph.
<div id="content"> <h1>Stylish CSS-Only Paragraph Effects</h1> <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare vehicula felis adipiscing euismod. Mauris vestibulum vel odio tincidunt molestie. Suspendisse vestibulum, justo <span class="highlight">non tempor gravida</span>, lectus eros auctor metus, eu congue eros turpis eget nunc.</p> <p class="pull">Vestibulum felis lacus, ornare et enim vitae, tincidunt fringilla odio.</p> <p class="bigger">Nulla vel nisl ut risus malesuada volutpat ac id nunc. Vestibulum felis lacus, ornare et enim vitae, tincidunt fringilla odio. Maecenas varius felis in elit ornare, dignissim faucibus felis lobortis. </p> <p>Vivamus et dolor massa. Suspendisse mattis vestibulum arcu, ullamcorper vestibulum sapien auctor ac. Nulla dignissim, nulla ut cursus ultricies, nisi libero rutrum nisl, et luctus sem nibh nec dolor. Maecenas <a href="#">pulvinar convallis</a> erat, a convallis neque aliquet vitae.</p> <p>Proin in turpis non tellus ultricies porta. Vestibulum ac urna adipiscing, posuere tellus at, <span class="fancyamp">&</span> mollis tortor.</p> <blockquote>Quisque dictum, mi convallis tempus viverra, leo dolor convallis turpis, tincidunt tincidunt nunc lorem sit amet quam. In augue sapien, gravida non eros at, accumsan fermentum est. Maecenas malesuada tempus orci, in pellentesque tellus sodales sit amet.</blockquote> <p class="notice"><strong>Notice:</strong> Quisque vestibulum blandit magna, non varius lectus consequat et. Sed elementum dui elit, sit amet venenatis massa faucibus tempus.</p> <p><span class="dropcap-alt">N</span>ulla tristique aliquet sem, sed accumsan tellus. Phasellus dictum velit et quam pulvinar commodo. Vestibulum gravida ipsum malesuada nisl varius, ac <a href="#">feugiat sapien volutpat</a>. Fusce a nibh ac dui sagittis elementum. Vestibulum augue risus, semper a sollicitudin sit amet, consequat vel sapien. Nunc commodo elit eu turpis lobortis sollicitudin.</p> <p class="first bigger">In sollicitudin felis ac massa suscipit accumsan. Praesent tempus justo viverra eleifend congue. Praesent blandit sollicitudin orci, sed tincidunt arcu adipiscing vitae.</p> </div><!-- @end #content -->
Paragraph Drop Caps
The first thing you’ll probably notice is the large dropped letter in the first paragraph. This paragraph element is using a class of .first which is directly tied onto the drop cap effect. Writers often include this dropped capital within books and print work – but it’s also great for articles on the web.
p.first:first-letter, .dropcap {
float: left;
font-size: 4.8em;
padding: 2px;
font-family: Georgia, Tahoma, sans-serif;
margin-right: 10px;
line-height: 0.35em;
}
You’ll notice there are two selectors applied onto this dropped capital effect. CSS has a pseudo-class named :first-letter which targets the very first letter in any element. Note that this will not work if your paragraph contains another element preceding the text(such as an image thumbnail). If you need an image on the drop cap paragraph use a CSS background instead of the HTML img tag.With this :first-letter selector we can apply the drop cap onto any paragraph using the class .first.
But with another class .dropcap we could apply the effect by specifically wrapping the letter in a span element. This would appear as L in the HTML document. For CMS engines like WordPress it’s easiest to create a theme which supports the .first class appended onto every first paragraph in your posts or pages(or both).
p.altdrop:first-letter, .dropcap-alt {
float: left;
background: #434343;
color: #fff;
font-size: 2.2em;
padding: 10px 14px;
margin-right: 8px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
I also designed an alternative drop cap effect which creates a darker background surrounding the letter itself. Notice this alternative drop cap uses the Helvetica Neue family, while the original drop cap changes to Georgia or another serif font. This takes the dialect we often find in printed books and replicates it onto the digital screen.
Now the 2nd paragraph on the page uses a class of .bigger which simply increases the font size and line-height of the entire paragraph. Some websites prefer to make the first paragraph bigger to distinguish from the rest of the page. But you might also try combining drop caps along with bigger text to really catch people’s attention.
Internal Quotes
Articles which have quotes from another person often use blockquotes and other similar elements. Pull quotes are slightly different as they use text directly from the article itself. This is often done to emphasize a point or phrase which is crucial to the overall theme of the content.
.pull {
display: block;
float: right;
width: 28%;
padding: 16px;
margin-bottom: 1.25em;
background: #edefec;
color: #656565;
font-style: italic;
font-size: 1.65em;
line-height: 1.55em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
My pull quote design is very similar to what you’ll find here on Design Shack. It uses a slightly darker background along with CSS3 box shadows to appear fancier. The internal quote text is also larger to stand apart from the many other paragraphs. It is important to float these pull quotes over to the left or right side of the page so they don’t appear as regular blockquotes.
blockquote {
color: #909090;
font-size: 1.35em;
line-height: 1.5em;
font-style: italic;
border-left: 5px solid #ab9f5c;
padding: 12px 20px;
margin-left: 20px;
margin-bottom: 30px;
quotes: none;
}
When using the HTML5 blockquote element we can often include other internal elements. Some blockquotes will incorporate multiple paragraphs and even a citation for the quote. The design style uses plenty of padding and margins to create space between the regular paragraphs. The left border is like a marker to help readers instantly recognize the blockquote is different from the other surrounding paragraphs.
Customizing Symbols
Although this is a tiny special effect, visitors do take notice when reading through pages of content. HTML entities are used to display symbols in your text. These entities could use something like Font Awesome to display customized icons, or you could use them to display typical HTML symbols.
.fancyamp {
font-family: 'Gabriela', 'Trebuchet MS', serif;
font-size: 1.6em;
}
In my example I’ve created the ampersand with a wrapping span element. This will change the font family to Gabriela which uses more of a serif design. A generic span element with the class .fancyamp can apply this font family onto the entity without affecting any other text. I’ve also resized it a bit larger to help stand out from the surrounding letters.
But don’t think this effect can only be used for ampersands. Copyright symbols, fractions, and other HTML entities could all benefit from this stylized design. You might even consider other text effects like bold italics or updating the text color.
Links & Highlighted Tones
In the first few paragraphs you’ll find some highlighted text along with a spiffy anchor link. They both have some extra padding because they both utilize background colors.
a {
color: #639f3b;
text-decoration: none;
}
a:hover {
background: #baff90;
color: #3c5331;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 1px 2px;
margin: 0 -2px;
z-index: 99999;
text-decoration: none;
}
.highlight {
background: #ffffaa;
padding: 1px 2px;
}
For the anchor links I’ve chosen a green color palette, although you can work with any mix of colors that best suits your layout. The added background effect when hovering each link helps visitors to immediately recognize once they’ve hovered onto something. The link text actually darkens so it stands out from the lighter-green background.
Since I’ve included padding onto the left and right sides, the negative margins are used to counteract any weird spaces when hovering on-and-off each link. There’s also padding on the .highlight class but since this doesn’t need a :hover design, the extra space will never actually be noticeable.
.notice {
display: block;
padding: 12px 20px;
background: #fff5af;
color: #a79b44;
text-shadow: 1px 1px 0 #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
If a highlighted text effect isn’t enough you can always create secondary classes for paragraph notifications. My class .notice drastically changes the text color to match up with the lighter shade of yellow in the background. Using the CSS3 text-shadow property helps with legibility. You could also make duplicate classes for notice boxes in other color schemes like green or blue.
Closing
I wouldn’t recommend incorporating all of these effects onto every page of your website. But it is wise to plan out these styles in advance and test everything before adding code to your stylesheet.
Visitors are so accustomed to traditional effects that you can really captivate an audience with these undertones. Feel free to download a copy of my tutorial code and see what other ideas you can add to these paragraph effects.