When designing a logo or other material for your website, most people will probably know about the importance of factors such as colours, space, shapes and design. Sure, designing a logo is about all these things and a visually easily recognisesable logo is a must.
However, choosing the right font for your materials like logo, page content is equally as important. In fact many incredibly successful products are almost synonymous with a certain kind of font. Think about Coca Cola’s curved font or IBM’s clear cut letters or any other famous company’s logo. Those fonts have become visually ingrained in peoples conception of the brand. Choosing the right font type for your logo is not just about recognisability, its also about choosing a font that communicates the right message to the general public. It has to do with congruently.
What is Font?
Font is a design for a set of characters. A font is the combination of typeface and other qualities, such as size, pitch, and spacing. For example, Times Roman is a typeface that defines the shape of each character. Within Times Roman, however, there are many fonts to choose from – different sizes, italic, bold, and so on.
The height of characters in a font is measured in points, each point being approximately 1/72 inch. The width is measured by pitch, which refers to how many characters can fit in an inch. Common pitch values are 10 and 12. A font is said to be fixed pitch if every character has the same width. If the widths vary depending on the shape of the character, it is called a proportional font.
Dynamic Font
Typography plays a very important role in Web Design. Current Web Design trends involves variety of fonts to ensure a good user experience. Obviously these are not-standard system fonts in many cases. Well, Image Replacement has always been a good solution but not for a site with too many elements or even sites with dynamic content. One of the sweetest things to come out of the HTML 3.0 specification was the ability to use the font of your choice on your Web pages. This ability to use “dynamic fonts,” or fonts which are downloaded from the server to your browser, has enabled developers to create and use fonts on their pages which create a whole new look from the same old text. So that you can see that this is just inline text, drag your mouse across the text. You can cut and paste it just like any other text on the page. Dynamic fonts can be used for seamless viewing of the contents (web pages) when the corresponding font in which the content has been created is not present on clients machine. The Dynamic fonts are placed on the server on which the web pages are hosted. They travel to the client machine in a manner transparent to the user. They remain in the cache of the users machine till the time he is viewing a particular webpage and are rendered back the browser once the user exits out of the website.
Here is a clean list of popular Dynamic Image Replacement solutions that will help you solve various font related issues.
- SiFR 2.0
- Cufón
- P+C DTR
- FLIR
- SIIR
- DTR
- SiFR 3
- Typeface.js
- IFR
- PHP+CSS DTR
- CSS Image Replacement (static)
- Swfir
- Google Font API
Google Font API
The world of web typography is advancing with leaps and bounds. Already we have the options of SiFR, Cufon, Typekit, @font-face, etc and now, Google has introduced their own custom font service under the Google Font API. Let’s take a look at what the Google Font API is and how you can use it in your own web designs. The Google Font API is basically a shortcut to manually using the CSS3 @font-face property. When you insert the Google code in your website, the Font API returns a stylesheet including an @font-face rule for your chosen font. Google will do all the hard work in getting the font to work in non-CSS3 browsers such as Internet Explorer.
The Google Font API is one of the most easy to use custom web font solutions out there. With just a line of code you’re ready to import a range of custom fonts from the Google Font Direcory.
- The Google Font API works like a charm in most browsers.
- The Google Font Directory includes a range of tasteful and stylish fonts to choose from, as well as a selection of more decorative options.
- All fonts are released under an Open Source license, so the Google Font API can be used in both your commercial and personal projects.
- Text rendered using the Google Font API is still selectable, which is one drawback with some solutions like SiFR.
- The Google Font API doesn’t rely on Javascript, so the customised fonts still show if the user has Javascript disabled.
- Because the fonts are rendered with good old CSS, any additional styling such as the CSS3 text-shadow property can be added.
Drawbacks of Google Font API
Despite having a few nice options in the Font Directory, the choice is fairly limited. However you can tie the Google Font API with Typekit using Javascript and the WebFont loader to open up further font options.
Most browsers will load the rest of the page before rendering the font. This may leave a blank space, or the fallback option until the page has been completely downloaded.
It’s not supported on mobile browsers such as the iPhone, iPod or iPad webkit browser or Android.
Example of Google Font API
Click here to find Google Font Directory! There you can find the code for implementing google dynamic font. enjoy!!
