Typography, pt.1

talk open source
1

[FONT=Georgia][SIZE=2][FONT=Times New Roman][SIZE=6]Typography, pt.1[/SIZE][/FONT]

The general interest and understanding of good typography isn’t to strong amongst our beloved kirupians. I feel type is a crucial part of graphic design, so I decided to share some thoughts. This is not an experiment, but definitely a good source.
[/SIZE][/FONT][FONT=Georgia][SIZE=2]I’m not very experienced, and my English is definitely not perfect. Please feel free to correct me, and/or give your opinions.
**
The main reason **for designing anything at all is to communicate a message. Be it your actionscript skills or the amazing taste of Diet Coke with a hint of lemon - communication is the key. A lot of the young creatives at Kirupa strive to create impressive pieces of work, but to often tend to devalue the most important part: *getting your message to the recipient. *
[/SIZE][/FONT][FONT=Georgia][SIZE=2]Written text is the main element of communication online, and therefore very important to handle correctly.

**In typographic terms, **we tend to divide text into the two main categories “Display” and “Text” (or “Body copy”). Think of a newspaper like Times. It has headings set in large sizes to attract the readers attention, and the actual story (what the headings attract you towards) set in a relatively small size. The headings are “Display” and the story is “Text”.
[/SIZE][/FONT][FONT=Georgia][SIZE=2]Most fonts are designed to fit into just one of these categories, and thus do not preform well at the other. Copy/paste an article from your local newspaper website into MS Word and set the font to “Impact, 10pt” (Win). You will understand quickly why Impact isn’t normally used for text setting. Formatting the same article in “Times New Roman” will make it a lot easier to read.

In print design, almost* all text is set with a serif font. Serifs are small cross strokes accentuating the end of the main stroke of a letter. (Serif font example: Times New Roman.) In opposite to a sans-serif font, a serif font let your eyes glide easier through the sentence, and also makes it easier to recognize the different character forms.[/SIZE][/FONT][FONT=Georgia][SIZE=2]Sans-serif literary means “without serif”. Arial is an example of a sans-serif font.[/SIZE][/FONT][FONT=Georgia][SIZE=2]

**On screen, **and definitely in Flash, the story is slightly different - but the principals remain the same. We rarely write long articles for publishing on screen. It’s just plain harder to read long texts on a screen than it is in a book.
[/SIZE][/FONT][FONT=Georgia][SIZE=2]Also due to screen resolution (I’ll explain!) it is harder to make good serif typefaces, and therefore there are fewer serif fonts usable for screen than sans-serifs.[/SIZE][/FONT][FONT=Georgia][SIZE=2] Thus [/SIZE][/FONT][FONT=Georgia][SIZE=2]Verdana (a sans serif) is one of the most popular fonts online, generally used for text setting. However, Georgia (a serif) is almost as popular.

Screen resolution: Due to the low resolution of computer screens, compared with print, (most computer screens have only 72 pixels per inch, whilst printed material start at a minimum of 150 drops of ink per inch - and most commonly around 300 dpi) fonts set at small sizes tend to appear very distorted. Different methods were applied to find a solution to this problem. I’ll shortly explain the three main approaches.
[/SIZE][/FONT][FONT=Georgia][SIZE=2]Manual hinting: Some fonts are manually designed to snap to screens pixel grid when set at small sizes. This has been the leading approach for some time. Example fonts: “Georgia” and “Verdana”. Both Microsoft and Apple ship these core fonts with their operating systems, making them natural choices for web design.
[/SIZE][/FONT][FONT=Georgia][SIZE=2]Pixel/Bitmap fonts: These fonts are designed to be set at a specific size, and designed to fit the pixel grid of computer screens. They are only scalable by exact multiples (8 px, 16 px, 24 px, 32 px …), and very popular amongst flash designers and developers.[/SIZE][/FONT][SIZE=2]
[/SIZE][FONT=Georgia][SIZE=2]*Cleartype: *This technology use the screen’s physical structure (a pixel actually consists of three different coloured sub-pixels arranged horizontally) to render fonts better.[/SIZE][/FONT][SIZE=2]
[/SIZE][FONT=Georgia][SIZE=2]
I’ll round up for now with some recommended free text fonts for use in Flash. (There are to many of very low quality out there!) If I find the time I’ll be back soon with some more:)

[/SIZE][/FONT][FONT=Georgia][SIZE=2]
:block:

[/SIZE][/FONT][FONT=Georgia][SIZE=2]PS: Arial is just a terrible replica of Helvetica! You’re better of with the original.

[/SIZE][/FONT]