a look at design for the web & all it entails

· view menu ·

using webfonts

by Bryce Reyes image © Bryce Reyes 2012 (via Abduzeedo) Hopefully you've already played and experimented by now :) Let's take your typesetting for web further and take a closer look at implementing webfonts. Take some time to play and experiment, to familiarise yourself with the technical implementation and find suitable font stacks to work with your chosen font/s. Consider letter width, line height and colour while styling the text elements. Remember to test your page with and without the webfont. As you work on your next project ~ consider all options and choose carefully whether the @ font-face method, as outlined in my blog post (which we looked at in our last typography session) is best, or whether using a webfont is a better option. This will of course primarily depend on your choice of typeface. ? task icon Task Download the sample text and experiment with Google fonts to create a balanced text presentation. Focus on creating a distinct visual style, e.g. formal, modern or traditional. ? download source files ?

webfont options


fontdeck Fontdeck is a web font service which offers font licences per domain. Fonts are implemented via CSS. (independent, founded by Jon Tan and Richard Rutter, sponsored by Clearleft and OmniTI)


typekit typekit offers font licenses via different account types (amount of domains/fonts). Fonts are implemented via JS. (independently started by several designers (Jeffrey Veen, Jason Santa Maria, Tim Brown and more), acquired by Adobe Systems Incorporated in 2011)


google fonts Googe web fonts offer a growing number of open source fonts, free to use on personal and commercial projects. Fonts can be downloaded and are implemented via CSS. ?

inspiring type experts

Erik Spiekermann

Typographer, graphic designer and businessman Erik Spiekermann has created timeless, influential and, yes, Meta-physical work over the past three decades. Next to founding MetaDesign and FontShop, the latter being the first ever digital distributor of fonts, and designing more instant classic typefaces than any other, he has been recognized as an outstanding expert internationally as a lecturer and professor. Listen to the design genius talk about new visual languages, design processes, the analogies of music and typography, and why we need http://laparkan.com/buy-tadalafil/ better client culture in our latest Gestalten.tv video and you will easily realize why. Before heading to new visionary pastures, the bike enthusiast will make a short stop to receive the German Design Lifetime Achievement Award 2011 in February. Watch our complete line up of video interviews on gestalten.tv

Tim Brown

At long last, designers can use real fonts on the web. But what now? Where do we go from here? Tim Brown has been studying type on the web for seven years, and has lots of ideas to share. In this talk, Tim will guide you through using typographic tools and perspectives that will change the way you design websites. Typography is an ancient art and craft; we are merely its latest practitioners. By looking to our tradition for guidance, we might once more attain our finest typographic achievements in this new medium. Produced for Build by Box42 - www.box42av.com | @box42av
Tim Brown - More Perfect Typography from Build on Vimeo. Tim Brown is Type Manager for Typekit. He studies, promotes, and advances the craft of web typography on a daily basis, and shares what he knows at Nice Web Type. Tim has written for A List Apart, and he helps web designers with tools like Web Font Specimen.

responsive design


In preparation for next week's session and using the given mockup - produce the design as single webpage. Try to get as close as possible in reproducing the given layout and ensure it displays as shown for a window width of 1280px. screenshot ? download source files Next week we will take a look at RWD and you will use your final HTML and CSS to implement media queries for a better display on smaller screens.

? to do list

  1. mark up the given sample content in a meaningful and semantic manner
  2. write your CSS recreating the given design
  3. ensure correct display of the given layout for 1280px window width
Please feel free to comment below if you have any questions :)


  1. prisca

    Hello everyone,
    just to clarify and answer your questions – glad you managed to find the fonts etc…

    We can discuss the pen nib in class – for mine, I’ve used the same font as the main heading. However, there are other details to consider as well, let’s have a chat about this on wednesday :)

    About setting the layout up fluid or fixed—well, keep in mind that we will talk about RWD and will want to make this layout responsive… Your task is to make sure the layout looks exactly as shown in the mockup, at a screen width of 1280px, we will do the rest in class.
    Working towards a fixed layout here, especially if you work with positioning, might add to the workload, just saying ;)

  2. Ben

    Thanks guys. I think it’s just fixed at 1280px though Toula!

  3. toula

    i have another question, i used a fixed layout, are we suposed to use fluid?

  4. Paola

    Hello Ben,

    You don’t need the fonts because on the html say

    And then on the css you just say which font you are using:
    font-family: UnifrakturMaguntia, Georgia, serif;

    Because you say where the font is on the web I mean on the html then you don’t need to download it. I hope it makes sense.. It worked for me :)


  5. stavros

    Sorry i meant Safari. Every browser renders it differently. Try for example Firefox , Chrome and Safari. All different!

  6. stavros

    Ok, it’s a browser thing, switched to chrome…and guess what…it appears like the picture!!

  7. stavros

    Ben i have it like that but at least for me it doesn’t make any difference.
    The quotation marks are depending from the font but the dingbats (although not totally sure) i think are just Html .

    Windows have a program called “character map”. If you open the fonts with that program you will see all the characters they have. I don’t see though an alternative pen:/

    I also tried to find an Html alternative but no luck. Just & #10001 and the & #10002 that Prisca uses.

    So in the end no idea why the picture is like that. Maybe i am doing something wrong….maybe it’s a Photoshop thing…maybe the operating system…maybe the browser…really no idea.

  8. Ben

    Sorry &#10 002; (delete space)

  9. Ben

    Interesting, did you use ✒ for the pen nib ding? I think that should be styled as the same font as the headers: the blackletter-style one.

  10. stavros

    Ben i downloaded the fonts from Google. It’s a dingbat. My problem is that the dingbats and text doesn’t render exactly the same. I guess because of the different browser and OS :/

  11. Ben

    False alarm on the fonts, I’ve found them now :)

    But still don’t know what to do with the pen nib!


  12. Ben

    Hi Prisca,

    Is the pen nib to the right of the header an image or a dingbat? Also, where are the fonts located? I can’t find them in the zip file that you sent.