20 Examples of Beautiful CSS Typography Design

Getting the message across – in style. That’s what typography is all about. It greatly affects the mood of the reader. Like when you’re reading a manuscript, most of the time, its on a yellow (ocher)-ish background. When you’re reading stuff related to food, you’re going to find a lot of red color use. That’s because the color read triggers the brain cells that relate to food. For example, Burger King, KFC, McDonald’s – they all have the color red in common.

In today’s article, I’m going to cover some really cool typography effects you can use in your projects – or just play around with them! I’ll be sharing the CSS code – so just paste them in your stylesheet and you’re good to go!

Bold by Rafal Tomal

01-bold

h1 { color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 275px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center; }

h2 { color: #111; font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 300; line-height: 32px; margin: 0 0 72px; text-align: center; }

p { color: #685206; font-family: 'Helvetica Neue', sans-serif; font-size: 14px; line-height: 24px; margin: 0 0 24px; text-align: justify; text-justify: inter-word; }

Orange Overstated by Chad Pierce

02-overstated

h1 { color: #7c795d; font-family: 'Trocchi', serif; font-size: 45px; font-weight: normal; line-height: 48px; margin: 0; }

h2 { color: #7c795d; font-family: 'Source Sans Pro', sans-serif; font-size: 28px; font-weight: 400; line-height: 32px; margin: 0 0 24px; }

.subheader { font-size: 26px; font-weight: 300; color: #ffcc66; margin: 0 0 24px; }

p { color: #4c4a37; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 32px; margin: 0 0 24px; }

a { color: #ff9900; background: #fff4a3; text-decoration: none; }

a:hover { color: #ffcc66 }

Don’t Taste Me Bro by Robert Neu

03-dont-taste-me-bro

h1 { color: #ffffff; font-family: 'Raleway',sans-serif; font-size: 62px; font-weight: 800; line-height: 72px; margin: 0 0 24px; text-align: center; text-transform: uppercase; }

h2 { color: #ffffff; font-family: 'Raleway',sans-serif; font-size: 30px; font-weight: 800; line-height: 36px; margin: 0 0 24px; text-align: center; }

p { color: #f8f8f8; font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; }

a { color: #c8c8c8; text-decoration: underline; }

a:hover { color: #1c1c1c; text-decoration: underline; }

Legacy by Steve Stead

04-legacy

a,
a:visited { color: #93291b; text-decoration: none; }

a:hover { text-decoration: underline }

h1 { font-family: 'Enriqueta', arial, serif; line-height: 1.25; margin: 0 0 10px; font-size: 40px; font-weight: bold; }
h1 a,
h1 a:visited { color: #333333 }

h1 a:hover { color: #93291b; text-decoration: none; }

p { color: #333333; font-family: "Helvetica Neue",Arial,sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5625; margin-bottom: 15px; }

a.read-more { background-color: #93291b; border: 1px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 1px #93291b inset; color: #f5f5f5; padding: 5px; }

a.read-more:hover { background-color: #be3523; border-radius: 3px 3px 3px 3px; text-decoration: none; }

Early Night by Rafal Tomal

05-early-night

h1 { color: #ffffff; font-family: 'Lato', sans-serif; font-size: 54px; font-weight: 300; line-height: 58px; margin: 0 0 58px; }

p { color: #adb7bd; font-family: 'Lucida Sans', Arial, sans-serif; font-size: 16px; line-height: 26px; text-indent: 30px; margin: 0; }

a { color: #fe921f; text-decoration: underline; }

a:hover { color: #ffffff }

.date { background: #fe921f; color: #ffffff; display: inline-block; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: bold; line-height: 12px; letter-spacing: 1px; margin: 0 0 30px; padding: 10px 15px 8px; text-transform: uppercase; }

Bright Mix by Jon Perez

06-bright-mix

h1 { color: #ff4411; font-size: 48px; font-family: 'Signika', sans-serif; padding-bottom: 10px; }

p { font-family: 'Inder', sans-serif; line-height: 28px; margin-bottom: 15px; color: #666; }

a { color: #ff4411; transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; }

a:hover { color: #a03c21 }

.date { float: left }

.author { float: right }

.entry-content { border-bottom: 3px solid #666; padding: 0 0 15px 0; margin-bottom: 8px; }

.meta-info { padding: 5px; overflow: hidden; }

.meta-info p { font-family: 'Fenix', serif; font-style: italic; color: #666; font-size: 16px; }

SureFire by Jon Perez

07-surefire

a { color: #ff6600; transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; font-family: 'Muli', sans-serif; }

a:hover { text-decoration: underline }

h1 { padding-bottom: 15px }

h1 a { font-family: 'Open Sans Condensed', sans-serif; font-size: 48px; color: #333; }

h1 a:hover { color: #ff6600; text-decoration: none; }

p { color: #333; font-family: 'Muli', sans-serif; margin-bottom: 15px; }

a.more-link { color: white; font-weight: bold; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding: 3px 10px; background-color: #ff6600; border-radius: 5px; float: right; }

a.more-link:hover { text-decoration: none; background-color: #666; border-radius: 0px; }

Heart Attack by Martin Hann

08-heart-attack

h1 { color: #F90B6D; font-family: 'Open Sans', sans-serif; font-size: 34px; font-weight: 300; line-height: 40px; margin: 0 0 16px; }

h2 { color: #F90B6D; font-family: 'Open Sans', sans-serif; font-size: 24px; font-weight: 300; line-height: 32px; margin: 0 0 14px; }

p { color: #222; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; margin: 0 0 14px; }

a { background: #fff; color: #222; text-decoration: none; }

a:hover { background: #F90B6D; color: #eee; text-decoration: none; }

Classic Dark by Jason Weaver

09-classic-dark

.post-header { margin-bottom: 30px; position: relative; }

h1 { color: #c9d0d4; font-family: 'Helvetica Neue', sans-serif; font-size: 46px; font-weight: 100; line-height: 50px; letter-spacing: 1px; padding: 0 0 40px; border-bottom: double #555; }

p { color: #bbc3c8; font-family: 'Verdana', sans-serif; font-size: 16px; line-height: 26px; text-indent: 30px; margin: 0; }

a { color: #c64119; border-bottom: 1px solid #c64119; text-decoration: none; }

a:hover { color: #993213; border-bottom: 1px solid #993213; }

.date { color: #bbc3c8; background: #292929; display: inline-block; font-family: 'Georgia', serif; font-style: italic; font-size: 18px; line-height: 22px; margin: 0 0 20px 18px; padding: 10px 12px 8px; position: absolute; bottom: -36px; }

The Beauty of Words by Jim Rush

10-the-baauty-of-words

blockquote { background-image: url(http://typespiration.com/wp-content/themes/typespiration/images/quote.png); background-position: 10px 10%; background-repeat: no-repeat no-repeat; padding: 150px 0; }

p { color: #f2f2f2; background: #ff4a4a; font-size: 75px; line-height: 74px; font-weight: 700; margin: 0 5px 24px; float: left; padding: 10px; margin: 0 5px 24px; font-family: 'Libre Baskerville', serif; }

.punchline p { background: #f2f2f2; color: #ff4a4a; }

a { color: #adadad; font-size: 25px; text-decoration: none; float: right; font-family: 'Libre Baskerville', serif; line-height: 4; }

a:hover { color: #ff4a4a; text-decoration: none; }

Arkadian by Jinson Abraham

11-arkadian

h1 { font-weight: 300; font-size: 38px; margin: 0px 0px 0px 0px; line-height: 120%; font-family: 'Open sans', sans-serif; }

p { font-family: 'Open sans', sans-serif; color: #777777; font-size: 14px; }

a { color: #f20553; text-decoration: none; }

a:hover { color: #D80649; text-decoration: none; }

/* Clearfix */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both }

blockquote { padding: 30px 40px; font-family: 'Bitter',serif; font-size: 18px; border-left: 5px solid #d0d0d0; margin: 20px 40px; color: #a9a9a9; }

.post { width: 800px; margin: 100px auto; background: #ffffff; -webkit-box-shadow: 0px 0px 25px 10px #a9a9a9; box-shadow: 0px 0px 25px 10px #a9a9a9; border-radius: 3px; }

.header-title { padding: 40px 40px }

.header-title h1 { color: #111111 }

.date { background: #f20553; width: 70px; height: 55px; border-radius: 35px; float: left; margin: 10px 30px 0px 0px; padding: 15px 0px 0px 0px; color: #ffffff; font-size: 24px; font-weight: 900; text-align: center; line-height: 100%; font-family: 'Open sans', sans-serif; }

.date span { font-size: 14px; text-transform: uppercase; font-weight: 400; display: block; color: #ffffff; }

.post-content { padding: 0px 40px 40px 40px; line-height: 24px; }

.post-meta { background: #f7f7f7; padding: 30px 40px 40px 40px; clear: both; border-top: 1px solid #d0d0d0; }

.meta-field { font-family: 'Open sans', sans-serif; width: 200px; float: left; margin-right: 20px; text-transform: uppercase; color: #111111; font-weight: 700; font-size: 12px; }

.meta-field span { font-size: 10px; font-weight: 400; display: block; color: #777777; text-transform: uppercase; }

Ardella by Joe Beason

12-ardella

h1 { color: #d54d7b; font-family: "Great Vibes", cursive; font-size: 165px; line-height: 160px; font-weight: normal; margin-bottom: 0px; margin-top: 40px; text-align: center; text-shadow: 0 1px 1px #fff; }

p { color: #7a7c7f; font-size: 29px; font-family: "Libre Baskerville", serif; line-height: 45px; text-align: center; text-shadow: 0 1px 1px #fff; padding-top: 20px; }

p.byline { font-style: italic; color: #B6B6B6; font-size: 24px; margin-top: 20px; text-align: center; text-shadow: 0 1px 1px #fff; }

The Truth by Martin Hann

13-the-truth

h1 { color: #b48608; font-family: 'Droid serif', serif; font-size: 36px; font-weight: 400; font-style: italic; line-height: 44px; margin: 0 0 12px; text-align: center; }

p { color: #eee; font-family: 'Droid Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; margin: 0 0 14px; }

a { color: #b48608; text-decoration: none; border-bottom: 1px solid #4c3a07; }

a:hover { color: #fff; background: #b48608; }

.date { border-top: 1px solid #fff; position: relative; top: 20px; margin-bottom: 30px; }

.date span { color: #000; text-decoration: none; font-style: italic; font-size: 13px; text-align: center; padding: 2px 5px; background: #fff; width: 120px; margin: 0 auto; display: block; position: relative; top: -10px; font-family: "Droid serif", serif; }

a.btn { font-family: 'Droid serif', serif; background: #b48608; padding: 4px 7px; color: #000; text-decoration: none; margin: 0 auto; width: 100%; width: 120px; margin: 0 auto; display: block; text-align: center; font-style: italic; }

a.btn:hover { color: #000; background: #fff; }

.left { float: left; margin: 0 5% 30px 0; width: 30%; }

.right { float: right; margin: 0 0 30px 0; width: 30%; }

Peacock by Kayleen Mendenhall

14-peacock

h1 { color: #CEF0D4; font-family: 'Rouge Script', cursive; font-size: 130px; font-weight: normal; line-height: 48px; margin: 0 0 50px; text-align: center; text-shadow: 1px 1px 2px #082b34; }

h2 { color: #a7e8f8; font-family: 'Julius Sans One', sans-serif; font-size: 22px; font-weight: bold; line-height: 32px; margin: 0 0 24px; text-shadow: 1px 1px 1px #082b34; }

p { color: #FFFFFF; font-family: 'Carme', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 24px; }

a { color: #CEF0D4; text-decoration: underline; }

a:hover { color: #a7e8f8; text-decoration: underline; }

Clean Slate by Rafal Tomal

15-clean-slate

h1 { color: #333333; font-family: 'Bitter', serif; font-size: 50px; font-weight: normal; line-height: 54px; margin: 0 0 54px; }

p { color: #333333; font-family: Georgia, serif; font-size: 18px; line-height: 28px; margin: 0 0 28px; }

p:first-of-type { font-size: 26px; line-height: 36px; margin: 0 0 28px; }

a { color: #c73036; font-family: Georgia, serif; text-decoration: underline; }

a:hover { color: #333333; text-decoration: underline; }

.author { color: #8d8d8d; font-family: Georgia, serif; font-style: italic; font-size: 14px; margin-bottom: 28px; }

.author a { color: #c73036; font-family: "Helvetica Neue", sans-serif; font-weight: bold; text-decoration: none; text-transform: uppercase; }

Relax by Roberto Gomez

16-relax

h1 { color: #fff; font-family: 'Righteous', cursive; font-size: 65px; font-weight: normal; line-height: 60px; margin: 10px 0 20px; text-transform: uppercase; text-shadow: 2px 2px 0 #000, margin: 10px 0 24px; text-align: center; }

h2 { font-size: 30px; letter-spacing: -1px; color: #DFBF84; text-transform: uppercase; text-shadow: 1px 1px 0 #000, margin: 10px 0 24px; text-align: center; line-height: 50px; }

p { color: #f6f6f6; font-family: 'Orienta', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 24px; text-align: center; }

a { color: #e8d4a7; text-decoration: none; text-align: right; padding: 15px; font-size: 20px; }

a:hover { color: #da9650; text-decoration: blink; }

MilkShake by Jon Perez

17-milkshake

h1 { color: #d04764; font-family: 'Lobster', cursive; font-size: 36px; font-weight: normal; line-height: 48px; margin: 0 0 18px; text-shadow: 1px 0 0 #fff; }

h2 { color: #2CA4B0; font-family: 'Oleo Script', cursive; font-size: 24px; font-weight: normal; line-height: 32px; margin: 0 0 18px; text-shadow: 1px 0 0 #fff; }

p { color: #333; font-family: 'Original Surfer', cursive; font-size: 16px; line-height: 28px; margin: 0 0 24px; }

a { color: #d04764; font-family: 'Original Surfer', cursive; }

a:hover { text-decoration: underline }

Modern Sans by Justin Twerdy

18-modern-sans

h1 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 64px; font-weight: 700; line-height: 64px; margin: 0 0 0; padding: 20px 30px; text-align: center; text-transform: uppercase; }

h2 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 48px; font-weight: 700; line-height: 48px; margin: 0 0 24px; padding: 0 30px; text-align: center; text-transform: uppercase; }

p { color: #111; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 28px; margin: 0 0 48px; }

a { color: #990000; text-decoration: none; }

a:hover { text-decoration: underline }

.date { color: #111; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; position: relative; text-align: center; z-index: 1; }

.date:before { border-top: 1px solid #111; content: ""; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }

.author { color: #111; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; padding-bottom: 38px; position: relative; text-align: center; z-index: 1; }

.author:before { border-top: 1px solid #111; content: ""; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }

.date span,
.author span { background: #fdfdfd; padding: 0 10px; text-transform: uppercase; }

.line { border-top: 1px solid #111; display: block; margin-top: 60px; padding-top: 50px; position: relative; }

.read-more { -moz-border-radius: 50%; -moz-transition: all 0.2s ease-in-out; -webkit-border-radius: 50%; -webkit-transition: all 0.2s ease-in-out; background: #111; border-radius: 50%; border: 10px solid #fdfdfd; color: #fff; display: block; font-family: 'Open Sans', sans-serif; font-size: 14px; height: 80px; line-height: 80px; margin: -40px 0 0 -40px; position: absolute; bottom: 0px; left: 50%; text-align: center; text-transform: uppercase; width: 80px; }

.read-more:hover { background: #990000; text-decoration: none; }

Corporation by Steve Head

19-corporation

h1,
h1 a,

h1 a:visited { font-family: Georgia, arial, serif; font-size: 38px; }
h1 a,

h1 a:visited { color: #605833; font-family: Georgia, arial, serif; }

h1 a:hover { color: #92864d; text-decoration: none; }
a,

a:visited { font-family: Enriqueta; font-size: 16px; color: #92864d; text-decoration: none; }

a:hover { text-decoration: underline }

p { color: #605833; font-family: Enriqueta; font-size: 16px; padding: 10px 0; }

.post-info { border-top: 1px dashed #70673b; border-bottom: 1px dashed #70673b; font-size: 13px; margin: 15px 0 15px; padding: 3px; text-transform: uppercase; color: #bfb585; }

a.read-more { background-color: #605833; border-radius: 5px 5px 5px 5px; color: white; float: right; font-family: Enriqueta,Arial,sans-serif; text-transform: uppercase; font-size: 16px; padding: 3px 10px; }

a.read-more:hover { background-color: #92864d; border-radius: 5px 5px 5px 5px; text-decoration: none; }

Sea Algae by Rafal Tomal

20-sea-algae

blockquote p { color: #ffffff; font-family: 'Merriweather', serif; font-size: 30px; font-weight: 300; line-height: 40px; margin: 0 30px 40px; text-align: center; text-shadow: #2a8d7b -1px -1px; }

p.author { color: #217969; font-family: 'Helvetica Neue', sans-serif; font-size: 12px; font-weight: bold; line-height: 12px; letter-spacing: 3px; text-align: center; text-shadow: #53b4a2 1px 1px; text-transform: uppercase; }

p.author span { color: #217969; font-family: 'Helvetica Neue', sans-serif; font-style: italic; font-weight: normal; letter-spacing: normal; text-transform: none; }

All these examples were taken from Typespiration – a “show-and-tell” portal for CSS typography enthusiasts. If you use these examples in other sites, please ensure that you credit the designer. 😉

If you need any help incorporating the CSS code in your site, let us know in the comments section below. Happy makeover!

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
About The Author
Sourav Kundu

Sourav is a WordPress enthusiast, an avid gamer and a sitcom collector. His playlists include heavy metal, electronic, and new-age tracks. When he's not online, he's spending quality time with his friends and family. You can follow him on Twitter.

This article has 3 Comments
  1. jessica says:

    Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.

Leave a Reply