Header Ads

Lecture 2 - Typography and Fonts


There is no doubt about its typography and the font faces we select has a large impact on multiple facets of our website including readability, mood, perceived article length, user experience and much, much more. Quite clearly there are just two ends of the spectrum into utilizing numerous typefaces: you can use just one font on your web site, or you may change fonts every other sentence. Somewhere in the center is the perfect balance between both these extremes. Your smartest choice is to choose everywhere from 2-4 typefaces to use on your design and stick together. At any time you exceed four or three typefaces that you begin to detract from the articles and the reader becomes confused regarding the goal of the plan and the information you're introducing.
typography cover

Font Choice frees your Website its Character. The main purpose of your font choice or typeface is to communicate the personality or purpose of your web site and content. This usually means you need to go back and examine the main purpose of your company, article, content and\/or product. As soon as you know the main point you wish to convey for your readers you can then select or plan a typeface that reflects the aim of your content. Consider for instance the typeface that TypeDeskRef.com uses for their header. The purpose of this website is to promote and sell their ebook that's a benchmark for typography enthusiasts.

three core fonts for web
Three Core Fonts for Web

Another web site that effectively communicates their sites objective with their typeface is Amazee Labs. Notice how a font they've chosen gives you a feeling of being on a chemistry lab where they're cooking up creative web solutions. Alignment is Important. Guide Your Readers throughout the Article. The way you align and organize your text on your site may have a big impact on how readable your articles is, as well as on also the mood also the type conveys for your readers. Typically, there are four types of font alignment. These are right, left, centered and justified.

Nevertheless, due to the power that CSS and Adobe Photoshop images offer to designers that you can pretty much align your text however that you seem to like. Nevertheless, we all must keep in mind that! With much POWER comes much RESPONSIBILITY. The alignment of your text needs into help guide your readers and users to also the most crucial info and also into help them see the structure and flow on your website. With also the availability of news, articles, reviews along with other media today, your visitors do not have time or patience into sludge through a 1500 plain text post.

You as the designer must efficiently use the power of alignment, font sizing, colors and every other tool you've into guide your readers through your website. Trent Walton does a good job of targeting the user down into the articles of his post with the not just the size, but especially the alignment of his text. Typography Accounts for Over ninety percent of the Design. Let's face the facts: many people come to your site to read the content of what you're offering to them.

Best FREE fonts for designers.

Serif fonts
Sans-serif fonts

serif and sans serif fonts
serif and sans serif fonts



Handwriting fonts
handwriting fonts
handwriting fonts

Retro and vintage fonts
Retro and vintage fonts
Retro and vintage fonts

Brush fonts
Brush fonts
Brush fonts

Tattoo fonts
and
Graffiti fonts
Graffiti fonts
Tattoo and Graffiti fonts

Where to find Free fonts?

Google Fonts is the best source of free fonts.
awwwards is another great source of finding Free fonts.

google fonts
Google Fonts

Key Tips:

  • Do not use more than Two font family,
  • Use HTML heading tags <h1...h6> for your heading,
  • Use CSS to customize fonts,
  • Use responsive typography,
  • Try to Use Sans Serif instead of Serif
  • Choose Color wisely which easily readable,
  • I personally use "Lato" font for the headings.
  • Use Brush, Handwriting, Retro etc fonts for the Logo.


Thanks for reading.

No comments

Powered by Blogger.