Letter-Perfect Type Design
Before the Internet became popular, it was nothing like the mass network of information that it is today. Web design was non-existent and the Internet simply provided a way for users to transfer text files. It really was as simple as that.
It wasn't until the extended development of HTML and the introduction of the FONT tag that users were given the chance to define the way that text should be presented on a monitor to a web audience.
Back before you and I were browsing the Internet, every last page of text was constructed from Times New Roman. Users had no choice to define alternatives such as Verdana, Arial or Georgia. It's hard to believe how drastically the font designer's landscape has shifted since those days, but the new scope for type design is endless.
Typography - or font design is an extremely profitable business as far as web design is concerned. You've probably seen the various websites that offer commercial fonts for a premium fee, and you've probably been pretty surprised that a few characters of color could be worth such a price.
Why is that the case, you ask?
It's primarily because creating a typeface is painstakingly hard work.
Websites are in debt to the hard graft of digital font designers. The Internet has developed to a stage where it's possible to embed custom fonts in to a page, and completely overhaul the theme of a site. The text may seem like an afterthought in the queue of designer's priorities, behind images and interface design, but it's actually an integral factor. Choosing the right font can make a website feel futuristic, traditional, or maybe even gothic.
A typeface designer is responsible for the programming and aesthetical presentation of a font. Depending on whether you plan to implement your font on the operating system or as a custom image, you need to consider the implications of the various standards around the web.
There are several popular commercial products which can be purchased to develop a type design. Programs such as Adobe Photoshop CS2, Adobe Illustrator and Macromedia Fireworks are all used on a widespread basis and have sufficient tools to aid a budding designer.
Illustrator is particularly useful given its supplementary toolbox for careful custom drawing. Fireworks is also catching on, and Photoshop fulfils just about every designing purpose you could imagine.
Technically speaking, there are many different kinds of fonts and typefaces that you can expect to work with. The most popular of all is TrueType (TTF), developed by Apple and later modified by Microsoft for Windows. When you use a typical font on a Windows-based system, you're most probably using a TrueType font. If you're designing a TrueType face, you can rest assured that it will be widely compatible across the web.
Another option is OpenType, a combination of TrueType and the Linux based Type1. This is the second most popular type and another good option if you're thinking about designing from scratch.
One of the most common instances you'll come across is the inclusion of a bitmap font in a web graphic. Bitmap types are special in the sense that they don't make use of vectors. They're actually a matrix of pixels, and thus don't make good candidates for scaling. If you try to resize a bitmap font, the text will lose its clarity and produce rough edges.
The benefit of bitmap types, and it's a pretty huge benefit, is that you can simply open up Photoshop or your chosen program and draw on the text in pixel form. There's no vector and glyph coding to worry about.
When you're implementing a letter type on a website, you need to give due consideration to the style of the site itself. Is the theme traditional? Is it casual, or formal? Try to remember that too much of the same font can be a hindrance and dilute the impact in general.
Always remember to design with anti-aliasing in mind. You may have seen the term alias crop up in font engineering before, it simply describes the smoothness of the edges. Setting your font to anti-alias will provide a much smoother feel to the text and is highly recommended for all type design.
As we've already discussed, the use of vectors is another important issue to consider. A vector based type is one which relies upon lines, curves, and mathematical calculations to predict the look of a font. The advantage of this is the loading time and efficiency.
If you imagine that you have a 400x400 square that you wish to output to your screen, what do you suppose is the best way to approach this? Some designers may choose to go in and color the pixels, saving it as a bitmap. Others may opt for a vector format which essentially tells the browser the angles and dimensions, and cuts down on the erroneous memory required to save the information of every last pixel.
As far as your fonts are concerned, there are advantages in both methods. For an aspiring designer, however, it's best to start with what you can see. Bitmap based fonts (BDF) are more responsive in that sense.
Even if you have the best character set imaginable, it doesn't count for much if you don't have a good grasp of kerning and tracking. When we see a typeface on our screens, what is it that tells the output device how to space the individual characters? This is where kerning is influential. When we kern, we specify the distance and attributes linked to space. While some fonts may have a spacey feel, others may overlap. Take a look at certain fonts on web pages and notice how the letters overlap each other. The process behind this concept is kerning. And as a type face designer, kerning is your best friend.
So let's suppose that you're looking to set the theme of your website with fonts and typefaces. Where do you start? Times New Roman can look fairly ugly and it isn't the friendliest font on the eyes by any means.
The golden rule of font implementation on the web, and indeed everywhere - is to never use two similar fonts on the same site. You should only ever use a maximum of two fonts on your website in the first place, but similar types are a strict no-go. Any more and the user will consider the theme inconsistent and unpredictable.
It's quite possible to use a tidy modern font with a dirty graffiti typeface, or any other font which happens to look different. But if you start meshing the same styles together, you'll be losing a great deal of professionalism.
Embedding fonts in a webpage, although it's not technically true to the term : is growing in popularity and users are opting to use small GIFs rather than HTML text.
When you're using fonts on the web, with the use of the FONT tag or CSS scripting, it's important to remember that fonts will only translate to a user's browser if they have that particular typeface installed on their system. If they don't, they'll simply get the default : Times New Roman.
While this is an inconvenience, you've probably seen interface designs with some wild and wacky fonts that you've never seen before in your life. Designers get around this by presenting the fonts to the user as GIF or JPEG images. The user doesn't have to have the font installed on the operating system to be able to view it, because the image format automatically translates every last pixel to their screen.
So why aren't all typefaces saved in image format? As we've already seen, some are. But text loads MUCH faster in TTF form. Can you imagine having to load an entire page of images just to read a few paragraphs? The HTML standard converts text to a format which it can output in the browser, and this is why we only have a limited number of options when we choose to select a font in the FONT tag.
As a global rule, if you choose to take the path of displaying text in images, always remember to provide the ALT tag. This crucial tag ensures that images which fail to load are still outputted with the "alternative" text.
To master the art of typography, you have to truly appreciate the delicacy with which characters and fonts are built. It's certainly a rewarding process and can be the making of a website. But it isn't an easy skill to learn.------------------------------------------------------------------------------------------------------- If you are a business owner get listed at Best Technology Site, part of Localwin Network.
|
|
|
|