Today’s post features the third Cascading Style Sheet(CSS) Video Tutorial on font usage. The video is just over 4 minutes in length.
One important aspect of web publishing is effectively applying font treatments to make text more readable. With a few adjustments to fonts, the readership of a site will find it easier to assimilate the important information shared with them.
The tutorial shows how to apply several different font attributes to create a more unique and design centered presentation. While the web has some built-in limitations, these techniques will free you from the constraints of the default templates common in many blog applications.
Font Treatment – CSS Video Tutorial #3
Web Safe Fonts
As mentioned in the video, the following is a short list of some basic fonts to choose for a website:
- Arial, Arial Black
- Comic Sans MS
- Courier
- Georgia
- Impact
- Lucida Console
- Palatino,Book Antigua
- Tahoma,Geneva,sans-serif
- Times New Roman, Times, serif
- Trebuchet MS,Helvetica,Verdana
- Symbol,Webdings
- Wingdings, Zapf Dingbats
Let me know if this tutorial is helpful. If you have any other questions about fonts, leave a comment as well and I’ll do what I can to answer them as efficiently as possible. You can take styles in many directions and make simple changes that will spruce-up your site. At the same time they can get very complex especially when tweaking an existing style sheet. Go for it, just be patient with yourself as it takes a while to get the hang of it.
One important tip: before beginning tweaks to a stylesheet, copy and paste the style sheet into Notepad and save to your desktop. Each time you make significant changes and it works well, save another copy. This way if you muck it up, it won’t take you but a minute to reverse it and then wait until a later time to try again.
Powered by ScribeFire.
8 Comments
Hi Phil,
Thanks for another CSS tutorial. FYI, I had finally managed to put tabs into my blog. It was made possible because of your tutorial.
Initially I did not managed to make it right for IE7. Then, I went to search and look at other sites. I copied one of the sites CSS and finally everything is working fine!
Once again, Thank you Phil.
Best Wishes
Let’s Acquire Wisdom and Live with Passion
Sam, that’s very cool. Glad it worked-out for you. It looks great! I thought you’d figure it out. Good stuff.
Another great tutorial. I never looked it up, but thanks so much for explaining the font family. I really did not understand that at all. Now it makes sense.
Mike, Thanks for the comment. Re-visiting some of the basic stuff is always informative as it’s a good way to cover stuff we gloss over in the learning process. Self-taught development is the best way to learn but I know I jump over concepts along the way.
I am not sure how universal those last to points on the font list are… The problem is, of course that I might uninstall any font on my PC and then your site will look different. Untill CSS 4, 5, 6, 7, 8 or 9 has a way of supplying the font that is…
Matt, Yep there’s always a possibility with any font-family that a user could uninstall a font, but the fonts are standard in Windows and Mac. These are by no means “guaranteed” as it’s impossible to guarantee the users configuration. I’ve never thought to uninstall the basic font-set on my machine, but I suppose it could be done. You do bring-up a good point in that “web-safe” fonts are really “web-standard” fonts. That probably would have been a better name, but then they didn’t ask me when they created the nomenclature. Good point.
Phil I didn’t know you had video tutorials. Very cool! Every time I check your site you have something new. Now that I’ve had problems with this very subject(on my old theme…) it makes so much more sense. I’d love to dig in, but have to finish that darn project I’m working on. Ugh.
Kelly, Glad it’s helpful. Yeah, I probably need to list-out somewhere all the tutorial helps in some indexed fashion. I’ve got the categories, but not sure folks assimilate the stuff. I’m going to do more on the subject soon. There’s so much more to cover. Hang in there w/ your project.