Today we’re going to be covering typography as it relates to CSS. For those of you who aren’t web geeks, CSS stands for Cascading Style Sheet, and it’s a language responsible for how web pages are displayed. When you load a page, an external CSS file is pulled, and that file tells the site which background color to use, where columns should go, the border width on images, whether links are underlined, everything. A long time ago– not that long, I guess, but around the time I was still packing school lunches and riding a bus– all that information was included right IN the code of the page. For instance:
<font color=”red”>I want this text to be colored red.</font>
would give you:
I want this text to be colored red.
The upside to this way of doing business was that it was easy and intuitive. You wanted your text bigger? No problem!
<font size=”+3″>This needs to be big!</font>
And now you have:
This needs to be big!
You could even combine the two into:
<font color=”red” size=”+3″>This needs to be big and red!</font>This needs to be big and red!
Some people still do it this way, but the vast majority of developers and designers do not. The reason is simple: you need to hand-code every single different text style, and it takes forever. Let’s say you have a site with twenty-four different pages, and they all have a top paragraph with size 14 text. Then, one day, you want to change all the top paragraphs to size 24. With the old method, you’re opening each one individually and editing, or running some copy-paste. Either way, it’s exhausting. Especially when you decide– and you will– that you don’t really want size 24 text after all. You want it to be 18, and you want it to be gray.
That’s where CSS comes in.
With CSS, you designate all the top paragraphs with a class or ID name, and then you just call them all in the external file. So your page code becomes:
<div class=”top-paragraph”>I don’t know what size or color I might eventually want here.</div>
and the CSS file says:
.top-paragraph {font-size: 18px;}
That’s it. Now, if you want to change ALL the top paragraphs, or anything marked with the “top-paragraph” class name, you just change that single bit of CSS. If you change it to
.top-paragraph {font-size:36px;color: blue;}
then all the top paragraphs will now be blue and 36 pixels. I know. You can imagine the time and effort saved. (By the way, if you’re interested in how to attach a CSS file to your HTML or PHP page, go ahead and visit here for a more thorough explanation.)
So here’s where my main point comes in. CSS, besides controlling font sizes and colors, also controls the typefaces themselves. This is why not all web pages are in Arial or Times New Roman anymore (or, dare I say it, Courier or Comics Sans). In CSS, we can tell our web page to use a bevy of web-safe fonts. Web-safe means that they’re considered practically universal, so they should display the same no matter which operating system or browser is viewing it. You can technically call any font you want in your CSS file:
.top-paragraph {font-family: PiratesAhoy;}
— but unless the viewer has Pirates Ahoy installed on their machine, your text will downgrade to something ugly and basic. Although– make no mistake– we don’t have to be ugly and basic when it comes to web-safe. Two of my favorite browser-loved fonts are:
Palatino Linotype
I’m a lighter serif than the
well-loved Georgia;
but I maintain that same
clean sophistication.
&
Gill Sans
In the same vein,
people often use Century Gothic
when I’m so much more
weighted and curvy.
Either of those can be called in CSS, in any page, on any site, and they’re a nice break from the typical Verdana.
For a long time, web-safe fonts were the only thing you could use if you wanted to get typographically creative. Now, though, with the introduction of Cufon and Typekit, nearly any font is available for use in your web design. This is the stuff that really excites me.
Cufon takes a font file you give it (make sure it’s allowed to be embedded– check the rights!), and generates a proprietary format which can be rendered quickly and beautifully in almost any browser. So, basically, you can give it the Pirates Ahoy font, and it can make a Cufon-generated file from that– which allows you to call Pirates Ahoy in your CSS. Unlike before, the script doesn’t look for Pirates Ahoy on the user’s computer. It looks for the Pirates Ahoy generated file on your server.
Cufon is free, and able to use on any font you own and are legally allowed to embed.
The other, popular option is Typekit. The drawbacks of Typekit are that your unpaid options are limited: two fonts from a small library, one website allowed, only a certain amount of page views, and a badge is required. As you pay more, your font access increases. Typekit has some lovely fonts, and some expensive commercial-grade ones, but it doesn’t allow you the breadth of typographical choices that Cufon does. On the plus side, Typekit hosts the fonts for you, so you don’t handle that traffic (it’s also nice if you’re not much of a web person, or have a hosted blog, or no access to your own server). You can control your Typekit through CSS as well. Typekit boasts that its technology is more cutting-edge and takes advantage of new browsers, but it does concede that Cufon allows better control for designers.
Whatever your choice– however you go about your font adventures– it’s amazing, humbling, and awesome to me that we have options now. We’ve come so far in our ability to use typography in web design, and our page styling has come so far in allowing for it. The ability to personalize the internet has evolved. It’s incredible that in a few short years, we went from:
Welcome to my website!
to–
YAY! I will be sending you an email later tonight about everything!
Absolutely, Katie! It depends what you need done– if it’s just a few questions you need answered, or troubleshooting a particular problem, I’ll usually do that for free. If you want an actual new theme designed or something more elaborate, go ahead and email me: db@dasbecca.com. We can work something out, either way!
Emmy, you are SUCH a sweetheart. Every comment, email, Twitter– everything from you is so positive and wonderful. I just had to say I love hearing from you; it always makes my day brighter! 🙂
I know you probably receive a TON of these comments/questions/requests, but do you by chance do any freelance work for poor souls who need a little help with their blog layout?
I don’t have ambitions to be a webdesigner but it’s cool to learn how my sites and the sites I view come together! I only know how to do the first, simple examples of fonts you listed, this is pretty cool stuff. Great explanation, also, I understood the CSS explanation really well!