Web 2.0 Stuff… hmm Part 1 I guess – FONT!!

Now in case you don’t know what Web 2.0 is, it’s pretty much everything you use nowadays including social media like Facebook, YouTube and all that. It’s a new trend of web design both in terms of visual interface and technology. The technology part I believe is mainly the development of AJAX (Asynchronous JavaScript And XML), which gives you the ability to push/pull specific part of your website without reloading the page, like what I did with my personal homepage right here: http://www.azndezign.com

Anyway to me AJAX is really cool since you might have realized a big part of a website might be its template. Well it’s also useless to reload the template cause it’s not gonna be changed until the webmaster upgraded the site itself (like Facebook changed its template 125816 times in like 3 months). Thus, web becomes more efficient, data gets packed into its very raw form and then made beautiful once its gets to your Firefox (or IE/Chrome/Safari) browser, saving you Internet traffic bill every month (yes!).

The more impressive part of web 2.0 is the significant change in visual interface, particularly the elimination of using tables with “spacer.gif” (yeah I hate spacer.gif so much) and switch to liquid/fixed/hybrid div tags which are cross-browser compatible and visually stunning also. In this 1st part I’ll talk about FONT!!!! Yes web 2.0 font is nice and elegant for sure.

So let’s see… I believe there’re 2 main font family: serif and sans-serif. What is serif? serif indicates the stroke at the tail of the letter like Times New Roman font:

Serif fonts

Serif fonts

I saw serif fonts more often in headlines and sans-serif in the body, probably because too many strokes confuse your eyes. You can read the details on Wikipedia so let’s not dive into history too much: http://en.wikipedia.org/wiki/Serif

So what is sans-serif? sans-serif fonts don’t have those strokes. They look more fresh and creative than the traditional mentioned fonts. Arial is 1 example of sans-serif but for web 2.0 I see a lot of people using Helvetica.

Helvetica Font

Helvetica Font

Most computers do support this font. Otherwise, Verdana is also equally nice and is a web-safe font just like Times New Roman. In general I believe there’re 9 web-safe fonts that are on both Windows and Mac OS X:

9 Web Safe Fonts

9 Web Safe Fonts

As you can see, there’re only 3 serif fonts out of 9, which means sans-serif is taking over (soon).

Besides choosing a nice font-family, a reasonable font size is also necessary. 12pt seems to be the common standard that works in most screen resolution. You don’t want the font size to be too large, which can cause pixelation and make you page look totally ugly. Of course too small means people can’t read your page properly.

In addition, you can incorporate your own fonts using CSS (Cascading Style Sheet). For example I use Ubuntu font for my navigation bar in my homepage:

@font-face {
font-family: "Ubuntu";
src: url(fonts/ubuntu.ttf) format("truetype");
}

Ubuntu Font

Ubuntu Font

This font looks kinda cute, clearly sans-serif but requires additional rendering from the browser. Also it’s a good practice to fall back on a traditional font if your computers/web browsers do not support those. You can do that in CSS:
font-family: Helvetica, Verdana, Arial, sans-serif;

What this does is it tries to render the web page using those fonts in priority. 1st priority is Helvetica (my favorite), if Helvetica is not available, then Verdana, then Arial, then any type of generic sans-serif fonts that computer has. You can change this weight by adjusting
font-weight: bold;

if the font supports bold text. Now if you’re good at graphics design and typography and all, you can even make your own font. Making a new font is rather complicated since you must follow a specific set of rules

Anatomy of Letterform

Anatomy of Letterform

So there you go, pick your favorite font or make your own and keep on designing!!

Advertisements
Tagged , , , , , , , ,

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: