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 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