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
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
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.
? 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
mark up the given sample content in a meaningful and semantic manner
write your CSS recreating the given design
ensure correct display of the given layout for 1280px window width
Please feel free to comment below if you have any questions :)
12 Comments
prisca
12
28/01/2013
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 ;)
Thanks guys. I think it’s just fixed at 1280px though Toula!
toula
10
27/01/2013
hey
i have another question, i used a fixed layout, are we suposed to use fluid?
Paola
9
27/01/2013
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 :)
Paola
stavros
8
27/01/2013
Sorry i meant Safari. Every browser renders it differently. Try for example Firefox , Chrome and Safari. All different!
stavros
7
27/01/2013
Ok, it’s a browser thing, switched to chrome…and guess what…it appears like the picture!!
stavros
6
27/01/2013
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.
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.
stavros
3
27/01/2013
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 :/
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
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
?
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 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)
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.
?
? 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.
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 ;)
Thanks guys. I think it’s just fixed at 1280px though Toula!
hey
i have another question, i used a fixed layout, are we suposed to use fluid?
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 :)
Paola
Sorry i meant Safari. Every browser renders it differently. Try for example Firefox , Chrome and Safari. All different!
Ok, it’s a browser thing, switched to chrome…and guess what…it appears like the picture!!
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.
Sorry 
 002; (delete space)
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.
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 :/
False alarm on the fonts, I’ve found them now :)
But still don’t know what to do with the pen nib!
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.
Thanks,
Ben