This post is part of the Ask a Designer series. You ask me questions, I answer them to the best of my ability. The questions can be about design process, branding, software, technical things – or even completely unrelated. Want to play? Leave me a comment here, or use the contact form.
“Websafe” fonts and colors are boring. How do you break out of them and still look pretty to most people?
To be quite honest, I was surprised when you mentioned web colors. The last time I heard about keeping the palette to those, was back in the 1990s. I was pretty sure this was no longer an issue, but I double-checked just in case.
The various sources confirmed what I had believed: today’s monitors can display millions of colors, so keeping your color scheme within those (rather ugly) 216 web safe colors is not necessary. Any rgb or hex color can now be called “safe” — so have fun with the color picker!
Of course, there are still some differences between the different monitors, and some are calibrated better than others, but short of going over to your every single website visitor’s house and calibrating their monitor for them, there is not much we can do about it.
Fonts are a different matter. The argument is still valid here. Fonts that are truly safe — meaning fonts installed on pretty much every single one of your potential visitor’s computer — are very, very few. You already know what I am talking about, I bet. Helvetica/Arial, Georgia/Times, and the serif/sans serif fallback.
While I have seen a few sites that were very well designed, with beautiful simple typography, using only the default web safe fonts, I realize that this is not something that will work for every single purpose. I also find the standard fonts rather bland.
Fortunately for us, there are a number of solutions available. There is some debate on using these work-arounds, because it might increase load times, and will not work for mobile users — however, that is exactly where the fallback standard fonts come in handy. If someone can not see your custom fonts, then they will see Arial or Helvetica or Georgia. I expect this will be only a very small percentage though. And the rest will see your custom font.
What are the solutions?
Here are a few that I have had a chance to try out:
This is probably the most straightforward way to include a custom font on your website if you have a copy of the font you want to use (and the license to use it as a webfont). It’s also slightly more technical, so if you have never touched a line of CSS, you may want to skip to plugin options. Fontsquirrel has a font converter that will convert your font for web use, and a simple tutorial for incorporating it. (Just google @font-face to find thousands of tutorials and best practice tips.)
If you use WordPress, chances are, you have heard of Google fonts. There are a number of WordPress plugins that will let you incorporate Google fonts into your website, many themes are pre-configured for their use, and the site itself has straightforward explanations. I personally did not find what I was looking for among their offerings, but if there is a font that is right for you, then this might be the easiest answer.
There are several that will allow you to use custom fonts. The process is similar to @font-face, but there is no need to know code; the plugins generally provide documentation on exactly how to incorporate your fonts. It’s likely that you will still have to convert your custom fonts by using FontSquirrel’s utility, and then simply customize the plugin according to the instructions.
Typekit and webfonts at fonts.com are two of the major ones. I find that fonts.com offers a much wider selection than any other provider — there are literally thousands of fonts to choose from. (they also offer a free account, but you have to include their badge on your website.)
The way it works is fairly simple: you set up an account with them and choose the fonts you want to use on your site. They supply you with a piece of code to place in your header (easy to do with most popular themes in WordPress, and there are plenty of tutorials out there that help you our with your specific theme), and voilà! your H3 and H4 headings, or whatever you specify, are magically replaced with the font of your choosing.
(You can see this specific service at work on Sex Love Liberation website that has recently been redesigned and updated by yours truly.)
I’m sure there are other ways to work in your custom fonts, but these should be enough to get you started. And yes, there are some disadvantages, but I truly think that the advantages outweigh all of them.
I hope this was helpful! If you have any more specific questions, just leave me a comment here, or catch me on Twitter.