CSS typography is fun. Really. If you’re in to S&M
So I found this article over at Smashing Magazine dealing with CSS typography. It’s a nice write up of both current and upcoming features – depending on your browser of choice – that will allow you to do some text formatting that I remember doing with Aldus PageMaker. Good times. Nice to see that technology is progressing at a steady pace. Competent writer Inayaili de León does a fine job going through some common and some not-so-common features such as hyphenation, indentation and hanging punctuation. I’m quite sure that you’ll find some new things in there.
She also covers the wonders of font-face, although I feel there is more to be written on that topic. Paul Irish, Esq, is a handsome fellow that makes jQuery even more fun. He has concocted a “bulletproof @font-face syntax” which works really, really well. Even in IE. Yes, in IE. Read all about it over here. Using these methods, you’ll want to use a font-face generator, such as this one @ fontsquirrel.com. It will make your online presence a bit more tolerable. But if you use Comic Sans, I will hunt you down. No, really. I’ll find a way.
Yeah, I tent do visit Smashing Magazine quite frequently even though I’m not on their payroll. Of course, they have written about typography before, and they have done so very well. One of my favorite articles is 50 Useful Design Tools For Beautiful Web Typography, covering everything from free fonts to which fonts are (usually) available on a given user’s computer. There’s just too much to mention here. Just go already! oh, and if you need some more CSS centric list o’ links, check this out instead.
If you’re into the fine art of controlling word wrapping (yeah, good luck with that), hyphenation and spaces, Alex Dunae has written an article that should make you feel all warm and fuzzy inside. What’s so special about his article, you ask? Well, my impatient, link loving visitor, he has actually made some screen shots with how different browsers interpret non-breaking space, soft hyphens and zero-width space. I know, crazy, right?
Speaking of CSS, CSS3 is shaping up quite nicely and it is a joy to play with. If you want some sort of example in the form of a sleek, sexy menu, you’re in luck! It also degrades quite nicely. As another example, you can actually create e sweet bokeh effect – using only CSS3 (and some jQuery). Also, here’s a cool effect that mimics a photo shoot, using jQuery and CSS. Should be quite nice for image cropping. And you really shouldn’t miss this article regarding multiple backgrounds and gradients with CSS! The important thing is to play and try out different techniques until you’re satisfied, look at it in IE 6, cry, ponder the meaning of life and then start over. That, my friend, is the circle of CSS.
Update: I forgot to mention a really sweet page with no less than 50 animations, using CSS3 (and some JS here and there). Definitely worth watching!
On a random note, here’s a newly hatched baby turtle. It resembles how I felt this morning.
Related posts:
- CSS3 pseudo-class selector emulation for IE 5.5 – 8 and html5 with video While gathering information as a part of my ongoing plan...
- A Popurls Clone with PHP, jQuery, Awesomeness Good people of the Internets, I know a good deal...