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.
inspiring type experts
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
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 :)
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!
i have another question, i used a fixed layout, are we suposed to use fluid?
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 :)
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.
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!
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.