Website Fonts

The Little Details: Icons and Fonts

When you’re thinking about the design of your website (or any other creative project, really), it can be easy to overlook the little details that make your site unique. Design choices about the font you write in, the colors on your page or even the icons that you display in various places all say something about your brand, your company. They are littered all over your website, responsible for sending subliminal messages to your users and customers. So it’s important to get these details right, even if you think that they won’t make a difference!

If you don’t consider yourself a creative person, have no fear – there are plenty of places to seek inspiration and resources when designing your website (or when working with a professional graphic designer). While there are some hard and fast rules about design elements, such as typography (http://typophile.com/files/typography_rules.pdf), most of the time if you have a general idea of what you want your page to look like, finding well designed pieces will make it pretty easy to come out with a polished final product. One of my top resource/inspiration hubs is actually Pinterest. If you scroll through the design or technology categories, there are tons of pins and related links that will point you to well-designed websites and beautiful resources (many of which are free!).

In terms of specific resources for fonts, icons, and more, here’s my top list for where to find them:

Fonts

Fontsquirrel.com and Dafont.com are great places for free, high quality fonts. They have categories ranging in simple sans serif fonts to exotic or handwritten styles. For less variety but more professional fonts, Google Fonts has a wide selection of nice looking fonts that will go with any standard website.

Icons

My favorite place to look for icons is probably The Noun Project. They offer many high quality icons for an array of categories/topics. I’m talking about the kinds of icons that you might even discover on your next smartphone. They’re always adding images to the site, so it’s a nice place to check back every one in a while to see what’s new.

Color Scheme

For color scheme inspiration, I absolutely adore design-seeds.com. They have many color palette ideas based off of different images that will make you want to redesign your whole site! If you prefer hand matching colors yourself, Adobe Color (www.color.adobe.com/create/color-wheel) is a fantastic way to work with colors that you or your graphic designer will likely use in Adobe Photoshop or Illustrator.

So go get inspired.  And feel free to share your own favorite websites that spark your creativity.

Website Fonts

Fonts add style and personality to a website.  They make headlines stand out and they affect the readability of a site.  Back in the dark ages of the internet, good web designs were limited to using web-safe fonts — fonts that are routinely installed on all major operating systems. Websites generally use either Serif or Sans-serif fonts. Serif fonts have small strokes or lines that extend from the ends of letters and symbols. Serif fonts have been used for centuries in printed materials — books, newspapers, magazines. Sans-serif fonts are simple and straightforward, and lack the “lines” of the serif fonts (“sans” is French for “without”). Because the simplicity of sans-serif fonts makes them easier to read on computers, most websites use sans-serif fonts for the body.

In the Serif family, the web-safe fonts are Georgia and Times New Roman. For Sans-serif, the web-safe fonts are Arial, Arial Black, Impact, Trebuchet MS, and Verdana. A good list of web-safe fonts and what they look like can be found at www.upsdell.com.

Why limit your web site to web-safe fonts? Because if you use a font that isn’t installed on the user’s computer, then the user won’t see that font. Instead, the user’s browser will replace it with a similar font that is on his/her computer. So for consistency, web designers used and recommended web-safe fonts. After all, if only 5% of the users can see the beautiful font, why bother?

With CSS2 came the ability to embed fonts. Unlike web-safe fonts, this method actually downloads and displays the font the designer used, whether or not it is installed on your computer. One main issue with this method, however, is that anyone can easily embed a commercial font they have on their computer, without a license. This can cause legal problems fast. Ethical web designers steered clear of using fonts unless they were sure there were no licensing issues (either the fonts were royalty free, or the client had purchased a license).

All that changed when Google stepped into the arena with a new service. Google Web Font provides hundreds of quality fonts (last time I checked about 291) that can be used in any web page by anyone. Cloud-based fonts are now becoming standard. This method is compatible with all major browsers (Chrome, Firefox, Safari, Opera, and even the bane of all designers, Internet Explorer (6+). Best of all, the fonts will display reliably on the vast majority of mobile operating systems (Android, iPhone, iPad, iPod). So head over to Google Fonts and browse away!