Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • May 15 2013

    Web Typography: Dos and donts for designers that can save your clients a lot of money

    We are all surrounded by it, and we are all depended on it, but very few take time to think about it except of course the ones who are in the business of producing it, like newspapers, publishers, web-designers. No we are not talking about writing techniques or content creation; we are talking about something that gives life to the said content, Typography. It is an essential part of publishing, online or otherwise, and it the nightmarish part of job of every web-designer there is.

    Web-Typography

    Choosing the right font that not only highlights your content but also leaves a subtle impression on the minds of the readers is more of an art than a science. But in this endeavor of choosing the right font some graphic designers forget the main reason why they are making the design and in zeal start using fonts that are very difficult to use for a website and cause a lot of a trouble for web-developers and lots of money for website owners. Being the most experienced PSD to HTML service there is, we have faced similar problems a gazillion times and thus through this post like to point-out some typography dos and don’ts for web-designers that can save them a lot of money. But to understand the problem more accurately let’s first take a look at what web-typography is all about.

    A BRIEF HISTORY OF WEB TYPOGRAPHY

    In the beginning there was nothing, every website was made using default fonts that was available in developer’s system and every viewer saw the content rendered in their system’s default fonts, not the developer’s. Most of the time these fonts were the same but sometimes they tend to be different as when a Microsoft user views a site that was main made using Macintosh’s default fonts. Thus we witnessed the birth of the main problem with font that remains even now, that not every computer connected to internet has every single font in it to display every type of website optimally. That means that if a web-designer uses a font that the viewing computer don’t have, like Helvetica or Calibri for example, then the viewer won’t be able to see the content the way the web-designer wanted. The alternative, i.e. using images instead of font was not practical as internet speeds at that time was not that great and using images had serious load time issues.

    Core Fonts for the Web

    To counter this problem Microsoft, with its internet explorer, started to promote most used basic fonts through its Core Fonts for the Web drive such as Ariel, Times New Roman, Verdana, Trebuchet, and Comic Sans, etc. They made these fonts available freely to everyone and encouraged web-designers to use them. They became famous for the time being but limited font numbers resulted in similar looking websites and thus unhappy designer.

    sIFR

    They started experimenting more and then we got the next revolution in Scalable Inman Flash Replacement or sIFR in short. sIFR allowed developers to convert the custom font text into flash objects and displayed as it is only any computer. This was done through JavaScript. The text was displayed as it is and for a while everyone was happy. Well at least, nearly everyone.

    sIFR though useful, required both JavaScript and Flash enabled in the target computer and creating flash file of every text area was tiresome and time consuming process. In addition it still required downloading of .swf files on viewer’s computer that significantly increased loading time.

    Cufon

    So in search of finding another solution, developers invented Cufons. In this technique developers, mostly using online Cufon generators, converted the fonts into functional JavaScript file. These JS files dynamically created the necessary font on the canvas in the viewers’ computer itself thus eliminating the need for standardized fonts. But it also has problems. The web-designing trend was shifting to responsive websites and Cufon was particularly infamous in this aspect. So we got a new revolution, CSS3 Font face.

    Font-face

    Font face was the invention of CSS3. Though developers have been trying to solve the font problem using CSS for some time now through CSS2.1 and similar version, CSS3 was the closest solution to the font problem and thus is more popular. Using @font-face tags, CSS3 can call font files from a remote source, one that is hosted on a third party remote server (or hosting server if you have such capability). It was a very popular idea, one that didn’t have too many problems and was great to use in responsive sites also. Many web services started to pop up that provided such font hosting services and they maintained a whole collection of collection of fonts. Now designers have a very large repository of fonts to choose from and thus they can even forget about the original font problem itself. But that’s where the main problem started.

    Some Major Do’s and Don’ts of Web Typography

    • Don’t use any font that you like without researching

    You see, custom and unique fonts, though attractive, are mainly proprietary fonts and thus are very expensive to use in small scale or low budget designs as font hosting services charge way to high for such premium fonts. Designers sometimes forget about this and use these fonts. They can use them because de pay only once and download the font for a mere dollar or two, but that font is licensed to be used by one or two owner. It you have to use it on live website you may have to pay up to $1000 per month in font hosting service’s fee.

    Most website owners who hire designers don’t know that and many designers don’t think in such terms. The problem in the end comes on the head of developers and coders as they are not able to use the same font without running up the expenditure of the client. So the first rule for designers is that don’t use any font that you like without researching on it first. Its best to use a free or cheap font creatively rather than using a creative but expensive font until and unless it is an important requirement or you client is willing to shell the extra buck and trust us most are not such willing.

    • The main reason of a font is to highlight content

    Font is not an art tool. Think of it as a plugin for your design’s functionality rather than being a main functionality itself. The main aim of the font is to make the content look good in respect to your website-design’s elements. Thus while choosing fonts, focus should be on what the font would be used for rather than how good it looks. You will find that you automatically reject half of the expensive fonts just because they are not utmost necessary or you can exact same level of effect using a similar but less expensive font or an altogether different one.

    • Keep yourself up to date with popular fonts

    There are no fixed criteria to decide whether a font is popular or not. That’s where experience and research comes in. Check as many famous or popular publishing sites as you can and keep track of the fonts they are using. In addition every day tens of free and open source fonts are added on the internet and at the same time many old but paid fonts are being made free, so it’s best to keep a lookout for such fonts on major font services and repositories. And it’s best to keep track of the using licenses of fonts as not all fonts can be used for publishing.

    • Test, Test, and Test Again

    You may be a designer and you may not have any obligation to check any font on the web, but if you are designing for the web, it is best practice to first test the font on multiple web browsers, and if possible on multiple systems as well. It will give you a developer’s perspective and insight on how the font will look in the web browsers and whether the developer can use the font on the web. IN addition you should be aware of the client’s ultimate goal with the design and their targeted audience. You testing should be according to those needs.

    • Old techniques may not be that bad

    Even though Cufons and other techniques are a little old but they still work miraculously in some cases. So if you are hell bent on using a freely usable font that may not available on font service websites, and if your website doesnot require a responsive web design, then you can use Cufons for font rendering. The trick may be old but it is not dead and still used widely in web-building.

    Posted by ajeet Posted in: web design Comments: 0