Monday, February 6, 2012

Typography

Typography is the study and use of text in a document, and consists of several groups of fonts that share basic characteristics, called type-families or typeface.  Whether you’re writing for the web, designing a poster, or working on a novel to be printed; you’re using Typography.
 
Writing for the Web

In 1996, in order to ensure that all Web users had a basic set of fonts to choose from on their systems, Microsoft Corp. started the Core fonts for the Web initiative, making a list of approved fonts freely distributable.  These fonts were Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, and Verdana.  Although Microsoft’s initiative was terminated in 2002, the fonts were so widely used that Web designers have stuck with them since.

When writing for the web, it is important that each designer makes sure they are using Web-Safe Fonts.  Web-Safe fonts are fonts that are likely to be present on almost all computers and web-browsers.  For example, Arial, Times New Roman, and Verdana can be found on almost any modern computer (and most old computers too!), making these fonts Web-Safe.  

If a web designer chooses to use lesser known font types for their site (including fallback fonts), it is likely that most users will not have that font type available on their system.  In this case, the web browser of the user will try to use a generic font instead.  This may cause the website to appear distorted or make the information harder to read.  It is important for designers to use web-safe fonts so that they can be assured that every user can easily view and access their site’s content.

When writing for the web, there are two main categories of type; serif type and sans-serif type.  There are other categories when it comes to Typography as well (including script type, decorative type, and symbol type), but these are rarely used in place of the serif fonts when it comes to fonts for the web.  

Serif type fonts contain what look like “feet,” on the tops and bottoms of each character.  Serif fonts are used to give a conservative feel to the font, as well as making the font easier to read when viewing long articles or print.  Serif fonts are widely used in traditional printed materials, such as books and main articles in newspapers.  Examples of serif fonts include Times New Roman, Garamond, and Georgia.


Sans-Serif type fonts contain fonts without the strokes, or “feet” on the characters.  They are mainly used for labeling illustrations, titles, and headlines due to their easy legibility.  Examples of sans-serif fonts include Arial, Calibri, and Tahoma.


If you find the Web-Safe fonts too plain or boring and want to spice your page up with less generic typeface, the answer lies in CSS3′s @font-face rule.  @font-face is a CSS rule which allows you to download a particular font from your server, so that the user may render your webpage’s font, even if it’s not installed on their computer.

To use the @font-face rule you will first need to find fonts you are interested in, using websites such as http://www.urbanfonts.com/, or creating your own. Then you will need to upload your fonts to your server.  Once uploaded, open your CSS stylesheet and enter these lines of code, changing the information to your specified font and source code:

@font-face {
font-family: your-font;
src: url(http://example.com/fonts/your-font);
}


Although the @font-face rule is helpful when using Non-Web Safe fonts, it is not always promised that the rules you create will work with every user’s web-browser, and is probably much safer to mainly stick to Web-Safe fonts.

For more information on the @font-face rule, http://sixrevisions.com/css/font-face-guide/ has a very nice, detailed article explaining the basics.

No comments:

Post a Comment