New Blog Address: http://blog.grayjunior.com/

The Beauty of Typography

Back to top ↑

Introduction

Seen those beautiful letters across the web, on the posters, graphics and arts? I’m sure most of you would love to put those up on your own website. So, I hope at the end of this article I am capable enough to teach you some simple techniques that might help you achieve what you want.

What is Typography?

I shall just briefly touch on what typography is, since I believe most of us have already heard of it or have come across it.

“Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques.” Quoted from Wiki

It simply means that our text is composed not only readable but also visually satisfying, or creates a mode of attention for readers. To know about it, you may wish to read wiki’s full article, or just google up “typography”.

http://en.wikipedia.org/wiki/Typography

Before I get started, I’m going to show you a few examples of some beautifully crafted websites that shows how beautiful typography can be. This might help you to get some knowledge of what typography really is, and hopefully inspire you with some great ideas in designing your own website.

@font-face for CSS3

After having a good look at how others manipulate these beautiful fonts, I’m sure you would love to have those as well. There are a few ways to achieve those effects, which I will share on the later part of the article. Now, let’s take a look at the CSS method. Its easy and simple to implement a new font in your CSS, for you to use on your contents.

    The Code: 

  • @font-face { font-family: 'New Font Name' src: url(Walkway_Bold.ttf); }
  • @font-face { font-family: 'New Font Name' src: url('http://www.example.com/newfont/Walkway_Bold.ttf'); }

The code above shows two basic methods in using a custom font on your website. The first one uses a font that you have uploaded to the server, in the same directory, while the second one will retrieve the font from an external source. In both situation, the fonts are provided/downloaded by your server or other servers you have linked to. Let’s take a look at using the local fonts.

    The Code: 

  • @font-face { font-family: 'New Font Name' src: local(Arial); }
  • @font-face { font-family: 'New Font Name' src: local(Arial), url(/fonts/Arial.ttf); }

This set of codes simply uses what is already pre-installed in the user’s computer, thus no downloading of fonts is performed. But what differentiates the second set of code from the first, is that if it happens that the user do not have that font installed locally, it shall then be downloaded externally.

Additionally, you may provide a format declaration for your new fonts if there is a need to. The use of the format values are usually for platform-specific font data. In this article, I will not go into that specific aspect. This is an example:

    The Code: 

  • @font-face { font-family: 'New Font Name' src: local(Arial) format('truetype'); }
  • @font-face { font-family: 'New Font Name' src: local(Arial), url(/fonts/Arial.ttf) format('truetype', 'opentype'); }

If you do require a list of the type of formats available, these are the few of which are used.

String Extension
“Truetype” .ttf
“Opentype” .ttf , .otf
“Truetype-aat” .ttf
“Embedded-opentype” .eot
“SVG” .svg , .svgz

The techniques above only embeds the font into your “font-family” list. In order for you to use it in your content, you will have to include it in that particular element’s “font-family” selection. An example would be:

    The Code: 

  • @font-face { font-family: 'Walkway' src: url(Walkway_Bold.ttf); }
  • h1 { font-family: ‘Walkway’, Arial; font-weight: bold; font-size: 20px; }

Notice that a second font is declared? Just like your normal selection of “font-family”, if the first font is not available, the second one shall be used. In this case, I selected a web safe font. Speaking of web safe, now that I have shared the technique of applying a custom font, it is always good to know what are the fonts that are considered safe.

Web Safe Fonts

The term “Web Safe Fonts” indicates that the list of fonts that are available throughout all platforms. These fonts are also common in our local font library, therefore there is in no way such fonts, when used on web, will be unavailable. Just to list out a few, these fonts are considered web safe.

Serif Fonts

  • Cambria
  • Constantia
  • Georgia
  • Palatino Linotype
  • Times New Roman

Sans Serif Fonts

  • Arial
  • Arial Black
  • Calibri
  • Century Gothic
  • Helvetica
  • Impact
  • MS Sans Serif
  • Tahoma
  • Verdana

Monospaced Fonts

  • Courier New
  • Courier

If you wish to take a look at a list of beautiful web safe fonts, visit:

http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css

Where Do I Get These Fonts?

Now that CSS3 and all major browsers support such techniques, more and more font library websites, tutorials, etc, surfaced on the WWW World. These are the few places I frequent to see some beautiful and popular fonts people like:

There are of course, many others out there. Seek a few out to widen your library as some beautiful fonts are not available throughout all sources.

But please do take note about copyrights and infringements. These people created beautiful fonts for us to use for free, only to hope that we do not abuse or misuse them. So do respect their work. Some may state “free for personal use only”, “Free for commercial use” or both, while others could possibly be copyrighted or under Creative Commons License: http://creativecommons.org/licenses/by-sa/3.0/

Are There Any Other Methods?

Of course there are many other methods available online. The web has everything that you may possibly need. As promised, I will be sharing other methods you could use to achieve the same effect. The first, of course is paid services. There are a few websites that provide Web Font Embedding, but they require either annual/monthly payment, or one-time fee. I shall touch on those later.

Let’s go on to free. Something which everyone loves the most. Thus far, I have seen many instances of Google font usage. They provide easy implementation, most important of all, free, as well as some custom fonts. Although not much selections in their library yet, it helps you to break free from those common and boring fonts. I’m going to guide you through this, as some might be afraid to meddle with the source codes of their website.

Google Font Library

Google Font Library @ http://code.google.com/webfonts

Navigate yourself through Google’s web font library. Then, from there choose a font you wish to use on your website.

Google Font Details

Google Font Details

Google Character Sets

Google Character Sets

There are 4 tabs in this page, mainly: Specimen, Character List, Description, Get The Code. In the Specimen tab, you will get to see the various styles and sizes of the font after you have selected the font. While at the Character List, well, you will see the font’s character style. It is pretty straight forward here.

Google Embed Font Code

Google Embed Font Code

Here is the key to get your new font to work on your website. The first line of code is the Stylesheet’s link from Google’s CDN server. What you have to do here, is to scroll all the way to the top of your source code, then paste that line of code within the “<head></head>” portion. Below is a screenshot of an example for you to take a look.

Place it within the header

Place it within the header

Just as the guide I have provided above, declare the new font in the element you wish to use. Now, have you got it? Well, there you go! You have a new and beautiful font on your own website! If you do happen to like the font, or wish to upload to your own server, google allows you to download the fonts.

Google Download Font

Google Download Font

Alternatively, you may wish to use the common way to beautify your website- the PNG format. Get the font from the libraries, open up photoshop, style your word, save it for web devices in PNG format. Then, set it as either “<img/>” or as background in CSS. Of course, the latter is considered less efficient as it is not as SEO friendly as text-based contents or image tags with title/alternate text attributions.

If I Wish To Use Paid Services..?

Well, if after reading my tutorials on embedding your own fonts, you find that you would prefer such services provided to you instead, there’s a list compiled online, for your ease.

For more details about which is better, do check out this article @ Smashing Magazine.

http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

Conclusion

As CSS3 and HTML5 continues to flourish in the WWW world now, more and more designers or website owners are cutting down the usage of image. It helps their website to be more user-friendly, saves loading time, a more professional look( people would go WOW! how did they pull that off without an image?!), and easy to implement.

Using animation from JQuery or recent CSS3, we created a more interactive website for people to browse. Typography has become a big part of a design, content as well as a form of art. Yet without a proper way to implement such typography, we have to resort to using images. With @font-face, and it being supported in all browsers now, we can easily pull off beautiful and stunning typography. Say good bye to boring and common contents! Hope this article will be useful for people who has interest in typography.

Advertisements

Comments on: "The Beauty of Typography" (3)

  1. […] on it much, except to put a sample up here. If you really are interested in this, take a look at my tutorial: “The Beauty Of Typography.” By the way, yes it is really beautiful. One of the […]

  2. […] on it much, except to put a sample up here. If you really are interested in this, take a look at my tutorial: “The Beauty Of Typography.” By the way, yes it is really beautiful. One of the […]

  3. […] on it much, except to put a sample up here. If you really are interested in this, take a look at my tutorial: “The Beauty Of Typography.” By the way, yes it is really beautiful. One of the […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: