TYPEFACES
Knowing the difference
A brief historical  type journey

Letterpress Printing & Manual Typesetting

Block printing first came to Europe as a method for printing on cloth. This was very common in the years of the 14th century. Around 1400, the medium transferred to paper and people used it to print religious images and playing cards.

What did they print?

Block printing first came to Europe as a method for printing on cloth, where it was common by 1300. Before that people used woodblock print to print religious illustrations. This new possibility enabled a fast and easy reproduction of books and paperwork, that were usually required in large editions (e.g. the Bible or ownership documents).
This new printing method also provided books for schools and quickly became a very important part of their libraries.

How does it work?

The first part of the letterprint idea was using a single, hand-carved character to create identical copies of itself. Letterpress printing typical works with ink on paper using a printing press and was invented by Johannes Gutenberg in the mid-15th century.
Druing the first step of the traditional printing process one bookpage is build by putting together all the single lead letters. Depending on the font-size the time to build one page with 1500 letters required one hour.

The Gutenberg Bible

The most well-known work of this period is the Johannes Gutenberg Bible. Printed between 1452 and 1454 in Mainz, Germany. It consists of 1282 pages and was then printed in 180 copies. Beside the 150 Bibles printed on paper, there were about 30 editions made out of parchment.
Gutenberg developed around 290 letters to produce the first edition. The color illustrations have been added after the printing process. 48 copies have been preserved until today. The Gutenberg Bible had an incalculable effect on the history of the printed book.

Phototypesetting

Phototypesetting systems first appeared in the early 1960s. These devices consisted of glass disks that spun in front of a light source to selectively expose characters onto light-sensitive paper. The typesetter then typed a line of text on a Fairchild keyboard. To verify correct content of the line it was typed a second time. If the two lines were identical a bell rang and the machine produced a punched paper tape corresponding to the text. This was used to create a mechanical drawing or paste up of a whole page. A large film negative of the page is shot and used to make plates for offset printing.

All this changed after the first pre-engineered system appeared. This symstem combined every step in one box, including all editing processes up to the exposure to light. This software also contained a hyphenation-programm. A keyboard was used to type the text into the system and a small display showed the written text and its formatting.
After a few years and better-developed computers, it was finally possible to view the entire print image on a screen.

System Fonts

Until recently, Webdesigner were only able to use a few system fonts such as Arial, Verdana, Geneva, Courier or Garamond. Bigger headlines used either graphically images or a javascript based solution. This limited the options of the design varieties.

Arial
Verdana
Geneva
Courier
Garamond
Webfonts  an alternative to the system font
The digital font format .woff opens up new possibilities and replace the system fonts.

Finally, the corporate design of a company can also fully be use on their webside. They do not have to give up your house font and ajust to a system font.

Two great examples are Google Webfonts and @font-face, a way to creat a CSS font file of your font which you can embed into your script
Of course there are many other options and Google Webfonts and @font-face are just two examples. But there will be some links at the end of this page. If you want more informations about typography and its use online, check out these websites:

@ ia.net/responsive-typography-the-basic
@ A simple guide to responsive typography
@ You-Tube Video about planning for typeface
@font-face  New Possibilities

What is @font-face

@font-face can be used in your CSS document and allows you to connect a font from your server to a webpage, even if the user hasn't got that font installed.
You don not longer have to rely on a certain set of "web" fonts, such as Arial, Verdana or Helvetica.

How to use @font-face

There is simple way to embed a the rule.

@font-face {
font-family: 'QuicksandLight';
src: url('Quicksand_Light-webfont.eot');
font-weight: normal;
}

"font-family" is what you name the font.
"src" tells the browser where the font can be found.
"font-weight" is only important if your font is thinner or thicker as the normal version.

Informations & great tools

Information
@ www.font-face.com

Creat your own @font-face kit
@ www.fontsquirrel.com

Google  webfonts
How does it work?

The Google Fonts helps you add fonts to your website. You can browse their font-catalog whenever you want, choose any font you like, and copy the code required to use them into your script.
There are just 3 steps you need to follow for a great looking webpage.



1. Choose
Browse online throught the Google Webfonts Catalog and take a look at over hundreds of font families and add the once you like to your Collection.
2. Review
Compare your selections. Check out the different styles and dynamic samples of the fonts layout and display your example text.
3. Use your Font
Choose a Font and copy the code Google prepares for you. Copy it into your head area of your html code. Use your CSS style sheet to assign it to your text.
Is it free?

All fonts listed in their font-catalog are all released under open source licenses. You can use them on any non-commercial or commercial website.



Where can you find it?

http://www.google.com/fonts

8 great Google Fonts
1. Source Sans Pro (sans-serif)
2. Muli (sans-serif)
3. Gentium Basic (serif)
4. Cabin (sans-serif)
5. Julius Sans One (sans-serif, Headlines)
6. Open Sans (sans-serif)
7. Raleway (sans-serif)
8. Dosis (sans-serif, Headlines)
Here are some great webfonts you can include into your webdesign by using google webfonts or @font-face
Spice up your design&
use webfonts
for your webpage!