WEB TYPOGRAPHY created by Denise Kolodzey 

„Choosing the right font for a project is pretty much essential to create a beautiful and clear design. Combining the font with the perfect sizes and styles is a stepstone in achieving a unique and recognizable product.“ What I am trying to address 

CONTENT 01 From pictures to Web Typography 02 How to use fonts for the web 03 Where to find cool fonts 04 What else? 

From pictures to Web Typography 01/ 04 

What is this cow doing here? 

From a head of a cow to the ABC Each letter represented the initial sound of the semitic word for the displayed object – alep for cow head. The beginning of the ABC. 

… and into the Web When HTML was first released in 1993, fonts were controlled by the setting of each browser. The Website would suggest certain fonts to the browser, like Arial or Helvetica, and if they were installed they got used. The same website could be displayed differently depending on the fonts installed on the computers. A nightmare for designers…. 

2010 – the year of Web Fonts Webfonts allow us to use fonts that are not installed on the viewer's computer. Google Fonts was launched in 2010 to serve webfonts under free software licenses. Seven years later there are far more than 800 fonts available.

hello world! 

Choosing and using fonts 02/ 04 

Family – find one that is big! Font Family Font Face Character Width Font Style Regular Italic Oblique Thin Extra Light Light Regular Medium Semi-Bold Bold Extra-Bold Black Condensed Regular Extended 

Mixing fonts - who can with whom? Opposites attract. Fonts that clearly differentiate from each other can be combined, e.g. a serif with a sans-serif font, or tall and short. One rule: A A 

Mixing fonts - who can with whom? Try not to use more than two fonts, or more than four font faces in one document. One more rule: A A A 

Serif or sans-Serif? A A Let's keep both versions in mind - depending on the context. Some research says that sans-serif is easier to read on digital devices. 

Display Fonts They have more of a decorative nature and should be used for small amount of text like headlines and short slogans. I AM A DISPLAY FONT. ME TOO 

All Caps Writing all Caps can also be considered as a Display Font. Using all Caps in a running text makes it really hard to read. USE „ALL CAPS“ FOR A COOL HEADLINE. A 

The impact of fonts Fonts cause associations, even if it is only unconsciously. Through the use of fonts you have the possibility to express or evoke emotions, you can make information emotional. 

The impact of fonts Serious dynamic Antique modern Factual Technology Keep in mind that the font should correspond with the meaning of the text. Elegant Dominant 

Line spacing There is no standard size for line spacing, it is dependant on the font size, font type, width of the characters and the x-height. The bigger the line the bigger the line spacing. When only using caps, use a smaller line spacing. Some say the line space for a font of 12px should be about 120%. The bigger the font gets, the smaller is the procentual line spacing. The bigger the line the bigger the line spacing. When only using caps, use a smaller line spacing. Some say the line spacing for a font of 12px should be about 120%. The bigger the font gets, the smaller is the procentual line spacing. Good readability Hard to read 

Hierarchy The size of the font tells the user which part is important and decides where to read first. Es bonus vobis essum magis. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean. Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu. 

Where to find cool fonts 03/ 04 

Download fonts Font Squirrel provides you a selection of fonts to download, which are 100% free for commercial use. fontsquirrel.com 

Google Fonts Pretty much every website uses the directory for open-source web fonts today. The fonts are not being downloaded, they are hosted by Google. fonts.google.com The website is a playground for designers :) A 

What else? 04/ 04 

Maybe better not use Arial… There is nothing particular wrong with this font, it has just been extensively overused. Show your creativity by embedding a cool and interesting font. Thank you 

I am not creative today, what to use? Roboto and Open Sans are my recommendations. They come along in many styles and render beautifully on different browsers. 

“Learn the rules like a pro, so you can break them like an artist.” Pablo Picasso Last but not least 

THANK YOU created by Denise Kolodzey