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.
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
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)
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 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
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.
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
Please feel free to comment below if you have any questions :)
- 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