How to Bulletproof @font-face Web Fonts
You’re interviewing for your dream job, and you’re ready to kick some butt. A small group is gathered around a conference phone and some coding exercises, and they’re pulling up your portfolio on a projector so that everyone can review it.
It looks great, except for one thing: All of your beautiful web fonts are gone and have been replaced with… Arial.
No, this isn’t just a bad dream: It actually happened to me recently when I interviewed at a web design company (352 Media Group). It was painful. I ended up getting the job anyway, but the experience made me realize that even following best practices recommended by industry-leading developers such as Paul Irish’s Bulletproof @font-face syntax and in the current situation where there’s much wider browser support for @font-face, web fonts just aren’t foolproof.
Are You Using CSS3 Appropriately?
CSS3 is exciting. When it was introduced, it seemed like the untapped potential of Web Design was finally unlocked.
It proposes speedier web page response times due to the reduction of images needed for things such as text effects and web buttons for our UIs.
It cuts back our dependency on JavaScript for visual presentation purposes such as animation effects, not only resulting in less code (always a good thing) but also equating to even better web page performance.
It promises less reliance on expensive graphics software like Photoshop.
But has anything, in the broader scheme of visual design, really changed? We’re still dealing with the same users, the same content and the same user-centered design philosophy.
A Guide to CSS Colors in Web Design
With the exceptions of typography and layout, nothing has a more profound impact on the way we design and craft websites than color — from the visuals we showcase through images and media to the simple choice of whether to use salmon pink or neon green to give a website that ’90s "Help, I’m going blind!" appeal. This simple guide will look into CSS colors. You’ll also find excellent color charts and tools to help you work with color values.
CSS Typography: Examples and Tools
In the previous part of this series, we discussed some techniques and best practices for CSS typography. Let’s now delve into the subject further by looking into some case studies, tools, as well as a showcase of excellent CSS typography on the web.
This is the third part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.
Embracing and Using CSS3 Pragmatically
Web design is an industry where things change very fast. Over the last year or two, CSS3 has taken web design potential to a new level. It’s not that many more features are available in this latest iteration of the CSS specifications, it’s that CSS3 makes it easier to work with things that typically involved more work, more technologies, and more software. For example, basic animation and dynamic image capabilities such as color gradients were previously only possible with JavaScript, Flash, and image editing software like Photoshop. Not anymore.
CSS Typography: Techniques and Best Practices
In the first part of this series, we discussed some fundamental concepts pertaining to CSS typography. Now we are going to cover some excellent techniques, tips, tricks and best practices for dealing with typography on websites.
This is the second part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.
CSS Typography: The Basics
Typography is an essential component of a website’s design. This is for good reason: good typography is not only imperative for aesthetic appeal, but also improves site usability when text legibility and readability concepts are applied. Typography is all about proportions and spacing. There are also font styles to consider.
How can we use CSS for great typography in our web designs? This is a question we’ll try to answer.
This is the first part of a three-part series of guides on CSS typography that will cover everything from basic syntax to best practices and tools related to CSS typography.
