Ever since the web started, designers have desired to bring the beauty of their favourite fonts into their designs. Unfortunately, we’ve been limited and just been able to use a handful of ‘web-safe’ fonts (fonts that most computers will have installed) for the dynamic text in our designs, leaving using images or flash movies of non web-safe fonts (our precious, expensive and beautiful bought fonts) as our only resource for bringing them alive on the web.
Our desire was so strong that tools were created to bring these fonts into our tool belt – sIFR, Cufón, Flir and a few more – all with pros and cons, but none was really giving us the flexibility we needed. Today, with the strength and support CSS3 is getting, especially from browser developers, we can now make use of one of its greatest features: @font-face. This nifty tool gives us the power to embed any font we want into a website as native text (rather than an image or an object). Of course, it comes with a few limitations, but nothing that can’t be easily learnt and mastered in order to get all major browsers to display it exactly the way you want it.
tools | tech | trends: HTML5, CSS3, Dreamweaver CS5 / Espresso
expert: Enrique Ramírez
tutorial files & code: Download here
01. The markup
On your text editor, create a new file. Add an HTML5 doctype, an empty <style> tag in the header and a few paragraphs on the body, each with an h1 to h6 header. Add a blockquote for good measure. You’ll be adding different styles to each of these elements,
so keep them well separated for better comparison.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Web Fonts Styling</title>
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1” />
<style type=”text/css”>
</style>
</head>
<body>
<h1>Quick Brown Fox jumps over…</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</body>
</html>
02. The basic styling
Go to your <style> tag in the header, and give the basic page a prettier look. Add a background and font colour. Give some basic styling to the heading tags as well: a colour and a margin will be enough for now. You don’t need much, just some initial styling to make things easier and more inspiring to start working with.
body { background: #423C4D;
color: #C4C1C8;
margin: 0 auto;
padding: 100px 0;
width: 660px; }
h1, h2, h3, h4, h5, h6 {
color: #fff;
margin: 24px auto 12px; }
03. Body font
Next comes what’s probably the most important step on any website you’ll ever code: defining the global (default) font for the website. Define its line height, which is the space between lines of text, its font size and its font family. Helvetica Neue is an excellent specimen for our next experiments. You can go funky and add some text shadow to improve readability.
body {
background: #423C4D;
color: #C4C1C8;
font-family: ‘Helvetica Neue’, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.6;
margin: 0 auto;
padding: 100px 0;
text-shadow: 1px 1px rgba(0,0,0,.8);
width: 660px; }
h1, h2, h3, h4, h5, h6 {
color: #fff;
line-height: 1.2;
margin: 24px auto 12px;
text-shadow: none; }
04. Custom fonts
To integrate a custom font on your website, all you need is the source file. However, different browsers support different formats, so normally you’ll want to convert your ‘.ttf’ file to all of them for a real cross-browser experience. A great tool for this can be found at http://fontsquirrel.com/fontface/generator. IMPORTANT: Make sure the font’s licence allows for @font-face embedding.
05. @font-face
You may use a tool (like Font Squirrel’s) to generate the code, but it’s wise to understand it first. Using @font-face is simple: for each font you begin defining its name with the ‘font-family’ property, and then point out the font location within ‘src’. Note that ‘.eot’ file (for IE) must be in a different line.
@font-face {
font-family: ‘CaviarDreamsRegular’;
src: url(‘fonts/CaviarDreams-webfont.eot’);
src: url(‘fonts/CaviarDreams-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/CaviarDreams-webfont.woff’) format(‘woff’),
url(‘fonts/CaviarDreams-webfont.ttf’) format(‘truetype’),
url(‘fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular’) format(‘svg’);
}
06. Using @font-face fonts
Now that you’ve defined your fonts, you can start using them with the ‘font-family’ CSS property. Just add the name you defined in the previous step to any selector. You can now adjust its size, line height, colour or any other style you want. It’s as styleable as any Arial text!
h1 {
font-size: 42px;
font-family: CaviarDreamsRegular, ‘Helvetica Neue’, Arial, Helvetica, sans-serif;
font-weight: 100;
text-align: center;
width: 500px;
}
07. Font-weight fun
Something that goes unnoticed most of the time is that ‘font-weight’ serves for more than ‘bold’ and ‘normal’. You can set any multiple of 100 from 100 to 900, where 400 is the same as normal, and 700 is bold. For example, using Helvetica Neue with font-weight 100, we get a beautiful Ultra Light version.
h2 {font-size: 36px; font-weight: 100; letter-spacing: .1em;}
08. Text-shadow
CSS3 has a very versatile module called ‘text-shadow’. Its syntax is simple: first comes the x position, then the y position, then the feathering of the shadow, and lastly the colour. Text-shadow can be really useful to increase readability of a chunk of text, by having it offset. You can also create some nice effects with it.
h3 {
font-size: 38px;
text-shadow: 5px 5px black;
position: relative;
}
09. Handwritten notes
One of the advantages of @font-face is that you can add a lot more personality to blocks of content within your design. A handwritten note, for example. You can use a handwritten font for the box, a notepad background and assign a line-height so the text fits in the grid. The effect is very unique.
blockquote {
background: #918F94 url(‘bg-notepad.jpg’) left 10px;
color: #333;
float: right;
font-family: DesyrelRegular;
font-size: 18px;
line-height: 23px;
margin: 0 -24px 1em 1em;
padding: 10px 15px;
text-shadow: -1px -1px rgba(0,0,0,.15);
width: 300px;
-webkit-box-shadow: 2px 2px white;
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,.35);}
blockquote p {margin: 0;}
blockquote p:first-of-type {text-indent: 0;}
10. Text-transform
For the times where your content will be user-submitted and you want to keep it in a certain format, text-transform can be of tremendous help. You can transform text to lowercase, uppercase or capitalise it. This can be very useful for some handwritten fonts where you want proper capitalisation, since uppercase characters are highly adorned.
h4 {
font-family: CaviarDreamsRegular, ‘Helvetica Neue’, Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: normal;
text-transform: lowercase;}
h4 strong {text-transform: uppercase;}
11. Letter-spacing
Another powerful tool for styling your text, CSS’s letter spacing will add or remove space between characters. You can use any unit you may like, but ems are recommended to keep the aspect ratio between font sizes. Big fonts tend to look better with bigger letter spacing. Apply this to your h4 to see a good example.
h4 {letter-spacing: .5em;}
12. Font-stretch
Some fonts have a condensed and/or expanded style within, which often results in a very different-looking font. This can be very handy and save space and bandwidth when using @font-face. Fortunately, there’s an easy way to use these styles. Setting the element’s font-stretch to condensed will give us a more impact-like font that’s very suitable for headers.
h5 {
font-size: 30px;
font-stretch: condensed;}
13. Text-shadow revisited
You can have some more fun with the text-shadow property. You can stack more than one text shadow, making it possible to add a glow to your text to increase contrast, all while adding some double text to the background. Or you could even stack coloured glows!
h6 {
font-size: 48px;
font-stretch: condensed;
padding: 10px;
text-align: center;
text-shadow: 3px 3px 8px #BD9E59,
-3px -3px 8px #BD4B3B,
-3px 3px 8px #7EBD56,
3px -3px 8px #964BBD,
-3px -3px rgba(255,255,255,.3);
}
14. Add gradients
You can give your text a bit of texture by filling it with a gradient above it. First, relative-position your element. Then create an :after pseudo class on your element, use an empty content declaration, absolute-position it above your text with roughly the same height and apply a gradient background to it (it can be an image as well).
h6 {position: relative;}
h6:after {
content: “”;
display: block;
height: 52px;
left: 0;
position: absolute;
top: 15px;
width: 100%;
background: -moz-linear-gradient(top, rgba(66,60,77,.8) 0%, rgba(66,60,77,0) 90%);
background: -webkit-linear-gradient(top, rgba(66,60,77,.8) 0%,rgba(66,60,77,0) 100%);
background: linear-gradient(top, rgba(66,60,77,.8) 0%,rgba(66,60,77,0) 100%);}
15. Transformations
You can rotate your text to any degree using the transform CSS property. Adding a 15 degree rotation can be a great way to have styled text positioned in, say, a badge on a product to grab attention. The transform property also has a scale option, which can make your text twice its size without changing its font-size.
h6 {
-webkit-transform: rotate(-5deg) scale(1.5);
-moz-transform: rotate(-5deg) scale(1.5);
transform: rotate(-5deg) scale(1.5);}
16. Text-stroke
Webkit brings you another nifty feature, which lets you add a stroke to your text. The property name is ‘webkit-text-stroke’ and its syntax is similar to border’s, but without the ‘border-style’. Note that so far this will only work on webkit browsers, so it’s advised to use -webkit-text-fill-color to compensate for any accessibility issues.
h6 {
color: #fff;
-webkit-text-stroke: 1px #333;
-webkit-text-fill-color: #423C4D;}
17. Hover effects
For places where mouse interactivity is a must, you can combine any of the styles mentioned and apply them to a :hover element. Paired with an :after and a few animations, you can grab the user’s attention fast and effectively. Animations on text elements go smoother than on graphics, so it’d be wise to use that advantage.
.fin {
color: #fff;
font-family: TangerineRegular, ‘Helvetica Neue’, Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 120px;
margin: 0;
position: relative;
text-align: center;
text-shadow: 3px 3px black;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
.fin:hover {
-webkit-transform: rotate(-5deg) scale(1.5);
-moz-transform: rotate(-5deg) scale(1.5);
transform: rotate(-5deg) scale(1.5);
}
.fin:hover:after {
content: “Fin”;
display: block;
height: 52px;
left: 0;
position: absolute;
top: 0;
width: 100%;
text-shadow: 3px 3px 8px #BD9E59,
-3px -3px 8px #BD4B3B,
-3px 3px 8px #7EBD56,
3px -3px 8px #964BBD,
-3px -3px rgba(255,255,255,.3);}
18. Bottom line
You’ve now got a very good understanding and knowledge to achieve rich texts in your designs. However, beware not to fall into bad practices. Abusing or overusing these new possibilities can prove detrimental to your designs. The general rule of thumb to follow with text is: if it doesn’t aid impact or legibility, it’s better off gone.
