Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Typography - An introduction

Denise Kolodzey
December 01, 2017

Web Typography - An introduction

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.

Let me give you an introduction on how to best use Typography in your project.

Denise Kolodzey

December 01, 2017
Tweet

More Decks by Denise Kolodzey

Other Decks in Design

Transcript

  1. „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
  2. CONTENT 01 From pictures to Web Typography 02 How to

    use fonts for the web 03 Where to find cool fonts 04 What else?
  3. 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.
  4. … 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….
  5. 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. <h1> </h1> hello world!
  6. 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
  7. 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
  8. 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
  9. 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.
  10. 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
  11. 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
  12. 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.
  13. 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
  14. 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
  15. 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.
  16. Download fonts Font Squirrel provides you a selection of fonts

    to download, which are 100% free for commercial use. fontsquirrel.com
  17. 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
  18. 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
  19. 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.
  20. “Learn the rules like a pro, so you can break

    them like an artist.” Pablo Picasso Last but not least