I’ve been playing around with Google hosted fonts quite a bit lately. If you haven’t checked them out you should. Google has a massive library of “web friendly” fonts not matter what style you’re looking for. They render great on the web and are a sharp alternative if you’re looking for a way to spice up your site.
At any rate, the experiment below is a combination of Google Fonts and some CSS3. With modern CSS particularly, using @font-face it’s possible to create robust, graphic-like fonts. They’re quick loading and searchable by all the major search engines as they’re text. You should use text as much as you can for your website not only because text is index-able, but it also decreases page load times.
The pen below is an example of how you can create double outlined text for rich and compelling pages. In the text below I’m using the Google hosted font “Lobster“. It’s just one of hundreds of free fonts you can choose from.
The outlined effect below was created with a combination of strokes and text shadows. Fonts, colors, width and shadows are all controlled by rgba values, hex values and pixels. Simple, but elegant.
Double Outlined Text HTML
<h2>Double Outlined Text</h2>
Double Outlined Text CSS
text-shadow: rgba(255, 168, 6, .8) 4px 2px 2px;
-webkit-text-stroke: 3px rgba(100, 81, 0, .65);
/* SIGNATURE CODE */
-o-transition: color .5s ease-out, background 7s ease-in;
-ms-transition: color .5s ease-out, background 7s ease-in;
-moz-transition: color .5s ease-out, background 7s ease-in;
-webkit-transition: color .5s ease-out, background 7s ease-in;
transition: color .5s ease-out, background 7s ease-in;
padding: 0 .5vw 0 .5vw;