Welcome to e-Typography. Typography Give You Another Unexpected View. Feel free to leave comments. Thank You.
e-Typography
Showing posts with label Rules. Show all posts
Showing posts with label Rules. Show all posts

Wednesday, February 9, 2011

15 basic rules to create a good typography

Link us to: http://sn.im/22wjq3


The proposal for this article is to improve your skill in term of creating web or print. Of course, those rules will give you an idea on how to develop an object with typography contain the element of neat, clean, and easier to read. It will automatic bring the benefit to you in term of the attractive webpage or print because the rule been apply will give your reader easier to read and search the word on they need. The rule will separate in to the 14 point as the below, to let reader better understanding and having a clear message.

Simple Typography Web
[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]

  1. Do not over using type of font
3 Type of Fonts
[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]


At consider it will be useful through a document or website. If too many fonts apply in one page it will be creating messy and no neat because different font contain different size and share at the end it will be general confusion to the reader. A good rule to be following any document and page will not more then 3 different fonts it will give the benefit the result on clean, tidy and neat to the page.



2.   Hierarchy

Hierarchy
[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]

As the designer they should know the rule of the hierarchy is the important in the typography of the page. Each of the level in the hierarchy will tell the user the information are important and what the head line. The most basic rule in hierarchy the headline much is on the top of the page and bold it or in the large size compare to the body paragraph.



3.   Font size

According to the Coliss, each of a document or website should not more than 4 different font sizes. The reason why because too many font size make a document disjointed. Basically, 4 are enough for a document or webpage because one will going to heading of the paragraph, another one for an introduction, following will be body text and another one for an addition quote or something else.  



4.   Body size

Set in your mind always keep the body paragraph between 8 to 12 pt sizes. It looks near, tidy and given an idea to the user that are the body paragraph. In the any area of the school or college, the lecture will require the student doing they project or assignment on the body paragraph set as 12 pt.



5.   Readable typeface

Readable typeface
[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]
On the internet there have a lot of the type typeface available in the market. In some of webpage using the funny kinds of the typeface to write the article it may causes reader hard to be read. Keep in mind, for a good standard copy keep things as simple as you can it may bring the greater result. 



6. Leading

Readable typeface

Leading is an important element in the vertical space between the lines of type. To configure the Leading  its easy can be done by automatically setting.  The problem by now a lot of the user was not taken Leading as the important thing, at the end causes of reader having problem to read the sentence.



7.   Kerning

Leading
[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]
Kerning is the spacing between letters. Instead of automatically configure by it. An example of this for Helvetica “ r ” and “ t “ characters together it will be appeal kerning manually in this case.



8.   Accent or emphasize

Accent or emphasize that is effective to draw attention for the key words, it may help to bring out key words and also break up the key words from the large sections of text.



9.   Don’t over emphasis

Kerning
[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]

Keep the emphasis as simple as you can otherwise it may make the reader confusion. Basically, you may use bold, italic or underlined to do, it was the basic idea of the emphasis please keeps in mind of the method.   


10.   No caps in body text

Do not simply use capitals in the body paragraph. It may bring different meaning from what you try to tell. 



11.   Always align to a baseline.

Don’t over emphasis

[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]

Please keep the horizontal line of text as simple.



12.   Aligned

Always align to a baseline.
[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]
Always keep the text aligned to left it will be easy to read, will not bring the paragraph messy. In addition, why not using justify as aligned of the paragraph because sometime justify may create the gaps between the text are too much at the end bring the massy on the paragraph.



13.    Lines not too long or short

The lengths between the lines are important. It gives the clarity, the text easier to read. As a guide, each of the text contain 12 words will be prefect enough and provide more readable to the page it may using columns in between.



14.   Punctuation and Bullet point


[Source: http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html]

Lot of the people was forgotten the function of the punctuation marks and bullet point in the typography because of the software now day do not making it easy for the user to handle the correctly.



15.   Fibonacci

0 1 1 2 3 5 8 13 21 34 55 89 144…
The idea of the Fibonacci number is 0 and 1 and each subsequent number is sum up of the previous of two. As for Fibonacci sequence elegance it is useful the occasion where it can give. Many artists using the golden ratio, grand the work made. Therefore, it use in the typography it is a good suggestion to be consider.


Based on the above article, do you has notice about it before when you was doing document or web? Beside the above article, do you think which for the point we need to be alert or be careful?


Coliaa, 基本的だけど大切なタイポグラフィのシンプルな14のルール [online], Retrieved on 5th February 2011.

Thursday, February 3, 2011

Basic rules of typography for web design



Typography plays a very important role in web design. About 95% of web design consists of the font; therefore the knowledge of typography should be a top priority for web designers and web developers. Selecting the best fonts is essential for any image or design. Fonts can either make or destroy the design, so it is critical for designers to choose the right font that will suit to your design.
The following is a brief explanation about the fonts used in web design:

Serif Fonts

This is one of the oldest types of fonts around since the year 1200. One kind of Serif font family that often we know it is Times New Roman, Georgia, Book Antiqua, Palatino, and Garamond. Serif fonts are also commonly referred to as the letter 'shoes' because it has a lengthening of the serif her (see picture above). These fonts reflect the quality and firmness. Serif font is more readable, memorable, and easily absorbed by the brain. This font is often used in Newspapers and Magazines. The Serif fonts are more suitable for use in offline media high-resolution (300 dpi), such as books and newspapers, where they can perform detailed and more readable. They are not suitable for online text except when it is set larger than normal.

[Source: http://www.gravisware.com/tutorial/128-dasar-dasar-tipografi-dalam-web-design.html]


Slab-Serif Fonts
Slab-serif font is a subclass of serif fonts. Serif fonts such as fonts but have a firm straight line (not curved). This font is no good to be presented in small size because it will lose the details and become difficult to read. One type of Slab-Serif font that is quite popular is Rockwell.

[Source: http://www.gravisware.com/tutorial/128-dasar-dasar-tipografi-dalam-web-design.html]

Sans-Serif Fonts

Sans-serif font family is the most suitable font for use in web design. This is because the font is still comfortable to read on the screen. Sans-serif font also suitable for the title, because they are quite prominent and readable from a distance. Sans-serif font family of the most frequently used is Helvetica (known as Arial in Windows), Trebuchet MS, Lucida Grande, and Verdana. Despite its small size, all these fonts have characters that are 'clean' and easy to read.

[Source: http://www.gravisware.com/tutorial/128-dasar-dasar-tipografi-dalam-web-design.html]

Character Proportion

'Character Proportion' is a font that has the same wide character, no matter the letter 'w' or 'i' are all printed in the same width. This makes the character more difficult to read in normal size because of the letters are less proportional.
Courier New is the family of Character Proportion fonts. This font is not suitable for use as the main typography on the web. However, this font type shall be used in programming or presentation of the HTML codes because it has the same width of letters and spaces easily calculated.

[Source: http://www.gravisware.com/tutorial/128-dasar-dasar-tipografi-dalam-web-design.html]


Cursive and Fantasy Fonts
Two other font families are most often used is Cursive and Fantasy. Two font families are special fonts that are not suitable for use in the body text but quite accurate when use for the title or header.

[Source: http://www.gravisware.com/tutorial/128-dasar-dasar-tipografi-dalam-web-design.html]


Can you think of what are the font types suitable for Advertising, Logo, Apparels, Assignments, and Newspapers?

Reference:


Online References:
gravisware website company, Dasar-Dasar Tipografi dalam Web Design,[Online], Retrieved 2nd FEB 2011.

ShareThis

back to top