Typekit is Down

Adobe Typekit is partially down. Some websites using the hosted web fonts service are looking a bit normal. A few websites have fallen back to the standard Arial font. On this site, I use Google fonts called Francois One and Bitter. It’s designed to fall back to sans-serif. It’s unusual for a web font service to go down, but just like everything else, they do go down occasionally.

Google Font API

I had a little fun this morning playing around with Google Font API. With just a couple of quick codes on your webpage, blog or website, you can really style your sites using over a dozen beautiful fonts available from the Google Font Directory. The usage is pretty straightforward. See sample below. Just add a stylesheet reference in your header. Add some CSS elements in your stylesheets. Tada. Your done. Your website is now using Google’s web fonts. The advantage is you get a choice of high quality open source fonts, it works in most browsers, and it’s extremely easy to use.

Header

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>

Stylesheet

body { font-family: ‘Tangerine’, serif; }

If you want a little bit more control, flexibility and speed, you can use Font Loader. It’s a little bit more involved. It requires the use of Javascipt. You can also take advantage of TypeKit.

Use Cheaper Fonts

Aren’t fonts free on your computer? Yes, they are. So, what did you mean exactly by using cheaper fonts? Printer.com performed several print tests to determine which fonts are cheaper to print than others. Personally, I didn’t think it would matter that much, but apparently using certain fonts can save you as much as 30%.

Case in point, a 10-point Century Gothic font is 31 percent cheaper than using the default 11-point Arial font. Who would have thought it would be Century Gothic. From ZDNet.

On a dollar basis, the company projected that the average person printing around 25 pages a week would save $20 a year by using Century Gothic for all documents. A business or heavy-duty user printing 250 pages per week would save around $80 for the year. And large companies with multiple printers could potentially save hundreds of dollars a year.

It doesn’t look significant at first, but if your company prints in large volume, then the savings can be considerable. Who knew Century Gothic was a money saver.

Give Your Blog A Facelift

Why not give your blog a facelift? Have you noticed my new handy-dandy fancy headers? This is courtesy of a WordPress plugin called Facelift Image Replacement. Just download the plugin and install. If you like to add your own personal fonts, just place them in the fonts folder of the plugin.

There are thousands of free fonts available online. 1001 Free Fonts is just one of many. I am using a font called Will and Grace, after the font used in the popular sitcom of the same name. Here is one example showing h2 headers.

My Blog Needs A Facelift. Botox, Plastic Surgery?

It’s a pretty cool WordPress plugin. It’s SEO friendly as well. Give it a try. Give your blog a facelift.

CSS Font Order

When designing web pages, using the appropriate font for your design does wonder to the overall look, feel and layout of your page. Unfortunately, web designers are quite limited to the fonts they can use. Most web designers stick to the tried and true “web safe” fonts.

If you take all considerations including operating systems: Windows, Mac OS X, Linux, Unix, and browsers: IE, Firefox, Safari, Opera, etc, then you are really stuck with just 3 of the safest fonts on the web. They are: Arial/Helvetica, Times New Roman/Times, and Courier New/Courier.

Other fonts that work across platforms are: Palatino, Garamond, Bookman, and Avant Garde.

Fonts that work in Windows and Mac OS, but not in Unix+X are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black, and Impact.

If you like to consider all OS platforms in your design, then the order of your fonts in CSS is important. I recommend this sequence.

Establish a Baseline

At the very least, you need to establish your baseline font. Choose whether you want “Serif or Sans-Serif” font. The CSS would look something similar to this:

html { font-family: Serif}
html { font-family: Sans-Serif }

Choose a Web Safe Font

Next, choose a “web safe” font. Your choice comes down to either taking Arial/Helvetica, Times New Roman/Times, and Courier New/Courier. Most people don’t use the monotype Courier font except when displaying code. So, you are essentially down to four fonts, Arial/Helvetica or Times New Roman/Times. Helvetica is very popular. Arial is not far behind. New Times Roman is better than Times. In our example, will now look like this:

html { font-family: Times New Roman, Serif }
html { font-family: Arial, Sans-Serif }

Choose a Cross-Platform Font

If you must, you can choose a “cross platform font.” Again, our choices are: Palatino Linotype, Garamond, Bookman, and Avant Garde. The first 3 are Serif fonts. Avant Garde is the only Sans-Serif font.

html { font-family: Palatino Linotype, Times New Roman, Serif }
html { font-family: Avant Garde, Arial, Sans-Serif }

Add Other Fonts

If you must, you can choose other fonts, although they do not work in Unix+ systems. They are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black and Impact.

html { font-family: Georgia, Palatino, Times New Roman, Serif }
html { font-family: Verdana, Avant Garde, Arial, Sans-Serif }

There you have it. A safe way to implement CSS Fonts across all OS platforms.

One Reason I Love Verdana

One reason I really love Verdana is looks great on all browsers. And it’s a big enough reason. I think as a whole, most Sans-Serif fonts like Verdana, Helvetica and Arial, do look good because they tend to render them properly on most browsers, on most operating systems.

Georgia, Times New Roman, and most Serif fonts tend to look bad on some operating systems that do not have anti-aliasing. If they do, then it’s probably not a good idea to use them in small fonts. Georgia is used mostly as a headline because it looks great in large fonts.

Arial is probably the most used because it is easier to read. Times New Roman is standard in Windows. Comic Sans MS is informal, but some people comically like it.

Overall, I still think Verdana is best – for me anyways. I don’t know for you.

Choosing Your True Type

For web developers, choosing the right typeface or font for a web page is very important. Having the correct typeface on the web adds meaning to the message being delivered. Fonts can set the tone for the entire page. They invoke feelings. Using the right typeface can literally make or break a website. For my non-geek readers so that you don’t feel left out, choosing a typeface is like dating a girl or choosing a lifetime partner. Here are three quick points to help you in choosing your True Type.

Type Matters

Choosing the right type matters. Typefaces subconsciously affect the way we feel. The feelings when viewed can be formal or casual, modern or traditional, serious or friendly, cool or warm. What’s your type? Is your type traditional or modern? Is it bold or narrow? Tall or short? Edgy or smooth? The truth is there are no set rules when it comes to choosing the right typeface. Just choose the right one for the right occasion. If you want a newspaper feel, you might want to use Times New Roman. If you want a plain and blocky feel, you can choose Arial, which happens to be an IRS favorite. If you want something informal, Comic Sans MS will do the trick. It really comes down to your preference. So, choose wisely.

What You See Is Not Necessarily What You Will Get

Not all typefaces will render exactly the same way due to various OS and varying browsers. Mozilla’s Firefox will render certain typefaces slightly different than Internet Explorer. The Safari, Netscape, Gecko and Opera browsers might render them a little differently. An 10 pixel Arial font, for example, may look slightly bigger, smaller, narrower or wider in various browsers. That’s why it’s important to see how the typefaces behave in various circumstances. Have you ever been with a typeface that turned out to be other than?

Use Web Safe Fonts

So, it’s time for your girlfriend to meet your parents. What’s the safe choice? The same goes when choosing a font. Is Georgia really on your mind? Or is it the French-speaking Trebuchet? Do you prefer an older and mature Times? Or maybe the younger and trendier New Times Roman? How about plain old Arial? Is she not good enough? Or would you rather go with the Greek goddess named Helvetica? The choices are many and difficult. If I had to make a choice, I would choose Georgia and Helvetica. Yes, both. I love both of them. I chose them not because my name is Greek and “Georgia on my Mind” sounds very good when played on the saxophone. I chose them because both typefaces are easy to read and work great in italics. Both typefaces are easily available and are therefore web-safe.

I hope you find these three points helpful. Good luck in finding your True Type.

Thanks to Daniel Will-Harris’ article for the inspiration.