Though you have already had plenty of typography, I simply can't resist - I've got to give you a few more pointers, or reminders like the wonderful The 3rd SEED CONFERENCE. Here is a collection of links relating to typography, typography for the web specifically. With our final project focused on typography - the following links are meant to teach you about setting beautiful type as well as inspire you.

challenge yourself!

• KERNTYPE - a kerning game
• Shape Type - a letter shaping game
• The rather difficult font game

references

• The Elements of Typographic Style Applied to the Web
• Font Matrix
• CSS font stack
• shape catcher
• HTML character set

font tools

• WhatFont (bookmarklet for Safari and Chrome)
• FONTDROPPER (bookmarklet: drag & drop web font tester)
• What the font? (online tool: typeface recognition)

web fonts

• Google web fonts - open source fonts
• font deck - licensed web font service, per domain, via CSS
  (independent, founded by Jon Tan and Richard Rutter, sponsored by Clearleft and OmniTI)
• typekit - licensed via account type (amount of domains/fonts), via JS
  (independent started by several designers (Jeffrey Veen, Jason Santa Maria, Tim Brown and more), acquired by Adobe Systems Incorporated in 2011)

reading

• Thinking with type
• Type study: Sizing the legible letter
  Ethan Marcotte for Typekit blog
• What makes letters legible?
  Ralf Herrmann
• Increase Your Font Stacks With Font Matrix
  Richard Rutter for 24ways
• How to use CSS @font-face
  Tim Brown
• Bulletproof @font-face syntax
  Paul Irish
• The @Font-Face Rule And Useful Web Font Tricks
  Ralf Hermann
• Fonts available for @font-face embedding
   Ralf Hermann
• @font-face in IE: Making Web Fonts Work
  Jon Tan
• Typeface != Font
  Jon Tan
• typography for the web
  typography basics on graphiceyedea

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 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 www.gestalten.tv

Time is flying and you will need to get serious with the planning of your online portfolio :)
Let's start and focus on the work selection as well as evaluating the technicalities. A few aspects to consider:

planning your portfolio

• selecting
  think carefully which pieces to include - only choose your strongest work: quality over quantity.
• projecting
  consider the kind of work you want to do in future and select from your own pieces accordingly, always show work related to your final goal or dream and make sure to present it well.
• customising
  for each selected project - plan out how to present the work files in a manner which will show off its strength, originality as well as context. A custom treatment of the presentation will make your work shine.
• showing the work process!
  start with displaying the finished piece first, then tell the story of its conception, from drawing board to final.
• labelling
  plan out how to categorise, label and describe your work - the visuals will be the object of interest but titles, context and project information will highlight it.
• simplifying
  consider the website a mere vehicle to promote your work. Focus on keeping navigation and interactivity simple and intuitive - the easier it is to get to the point, i.e. view your work - the more attention and time will be given.

embedding video

• The video element, Tom Leadbetter on HTML5Doctor
• Video for Everybody! (tutorial)
• file format: OGG
• Vorbis
• video converter for HTML5 friendly formats
• html5media, JavaScript enabling <video> and <audio> tags
  in all major browsers

lightbox display

To get your images ready for online viewing - let's consider a few options. The sites linked to below are all single page webdesigns, presenting their visuals in different ways. Have a look and think about your own work and an appropriate presentation method for your own site.

single page portfolios

• Andy Patrick Design
• Graydon Poper
• Simon Coudeville
• Media Point Studios
• Jibe
• Launch Factory

implementing the lightbox

Using the sample files provided - work on implementing the lightbox via the Colorbox script from @jacklmoore.

1. ↓ download source files
2. Colorbox for Beginners
3. jQuery

!! reminder

project ② ~ submissions, please ;)

profile page design project deadline today:

↑ upload your profile page [as ZIP file, max file size 2MB]

✔ weekly task

Your next project will be all about originality and what you would like to show as opposed to the formal approach with a clear direction of getting work. As one example, have a look at the design of racket.net.au, an art & design studio based in Australia taking their unique approach to presenting their website.

With a less formal approach in mind, take a look through your body of work, all of your work: from doodles to sketches, drafts and design roughs as well as personal projects. Consider which pieces illustrate your creative process, allow insight into your thinking and which show off your talent. Scan, photograph and/or copy them into a folder, organise your files into meaningful categories and bring them in for feedback during next week's session.

Just to give you a few more inspirational nudges as you finalise your own profile page - have a look at this lovely profile page of Jessica Hische, and here are a few more links worth a thorough look :)

designers' profiles

• Jason Santa Maria: profile - portfolio
• Frank Chimero: website
• Veerle Pieters: profile on personal blog
• Trent Walton: profile on personal site
• Tariq Yosef: profile - portfolio

You might also want to read the FAQ page on Jessica's website - she answers questions about her background, working methods, her font "Buttermilk" and gives advice to young designers who are just starting out.

code sample file

Just to get your started ~ here is a new code sample, a very basic 2 column layout, including all files:
↓ download 'profilePage-project' folder

positioning: CSS float property

As we had a shorter session last week, let's discuss floats again, links repeated once more for easy access.

useful reading: CSS float property

• Floatutorial by Russ Weakly
• css float, tizag
• All about floats by Chris Coyier
• Clearing Floats by PPK
• CSS Float Theory: Things You Should Know by Vitaly Friedman

✔ weekly task

Focus on completing your profile page. Consider your content carefully, write a well phrased summary of yourself to be included as profile info and implement your new brand to give your page impact.

quick reminder:
project ② deadline !! next week

A new post on the blog of The Noun Project. Jon Hicks goes through aspects of taking an icon from sketch to the digital final, considering size, context, balance, grids and detail, a delightful must-read :)

We are proud to have designer Jon Hicks do a guest blog post and give us a quick design tutorial about symbols and icons. For those of you who don’t know, Jon is a designer from the UK and is well known for designing the Firefox and Mailchimp logos. You can view more information about his studio and his work here.

read now: Insights on Symbol Design

Today saw the launch of the new site design of HappyCog - a fresh look, new layout and lovely responsiveness :)
It is a design produced in only one week, "Redesign Week".

image credit: found via Frank Chimero on Gimmebar

Today will be a session of grids - for you to share your finding and time for us to discuss how useful you think you will find the design approach via grid systems.

links to your essays

listed in alphabetical order of first names

• Bruno
• Claudio
• Gary [PDF]
• George
• Iana
• Imran
• Yannis
• Jaana [PDF]

• Jim
• John
• Laura
• Matine
• Mint
• Nadia
• Negar
• Priscilla

• Richard
• Sara
• Tom
• Uzoma
• Vlad
• Yaroslav
• Yiannis

adopting grids

There is always lots of discussion on the value of using grids or the golden section for web design - opinions vary and are interesting to contemplate - curious to hear what conclusions you've come to during your work on the essay :)
And in case you did not see it - there was an interesting albeit brief discussion between @jasonsantamaria and @markboulton on Twitter a while ago. Mark mentioned topics he was in the progress of writing about for his new book, Jason commented and a conversation ensued, captured here on the design blog:
design discussion in 140 characters

useful links

• the grid system
• Five simple steps to designing grid systems, Mark Boulton
• Variable Grid System
• YAML - CSS framework
• 960gs
• gridsystemgenerator

image credit: Noise © Tariq Yosef

Let's welcome Sarah Read from GET (Guidance & Employability Team) who will talk about writing a professional CV and presenting a successful creative portfolio. Please do check back on this post as I will be updating it with any useful links Sarah might mention today (in addition to the ones listed below).

useful links for creating creative résumés

• CV writing tips, creativepool
• The Graphic Design Resume Guide
• The 7 deadly sins of résumé design,
  note: make sure to read the comments as well!
• 25 intelligent resume ideas

positioning: CSS float property

This is repeated from last week for easy access.
As soon as you are taming your content - you will want to control the position of your "boxes". Read the following tutorials and articles as recap and dive in deeper ;)

useful reading: CSS float property

• Floatutorial by Russ Weakly
• css float, tizag
• All about floats by Chris Coyier
• Clearing Floats by PPK
• CSS Float Theory: Things You Should Know by Vitaly Friedman

✔ weekly task

To get your started with thinking about your current project - create your own profile on about.me and leave your link in the comments below.

Hope you're all excited now, ready to dive in ~ having heard so much more about web typography . Just for your reference, here are the slides for both sessions, thanks, Anastasios :)

1. The Role of 2D & 3D Typographic Design in Visual Arts
2. Design, Art, Visual Experimentation, Screen based Communication: Web Typography

image info: drawings by & photo of Kevin Cornell ©

With your personal brand design in hand - it's time to introduce yourself online, to show a professional profile.

Consider how you would like to present yourself online, how you will establish a strong online presence to promote yourself and show your work. Let's have a look at a personal favourite of mine, designer and illustrator Kevin Cornell.

Kevin Cornell online

• bearskinrug.co.uk
  [current site, in design transition]
• v5.bearskinrug.co.uk
  [old site]
• birthdaystreet.com, tri-weekly comics
  collaboration: Kevin Cornell, Matt Sutter, Peter Dalkner
• Staying Motivated, article on A List Apart
  "Kevin is the staff illustrator to A List Apart."
• @bearskinrug
  Twitter Profile

!! reminder

project ① ~ submissions, please ;)

personal brand design project deadline today:

↑ upload your final design

↓ submit link to your prevue page

coding & apps

To get us started quicker with today's coding - here is a sample folder, containing both the prep and the site folder, ready to use ;)
↓ download 'default-project' folder

PC/Mac versions available: visit gedit website to download the latest version.

Mac only: download TacoHTML (old) or visit the Taco website for the latest version.

the box model

Time to tackle the famous box model. The box model is the layout principle applied for page layout on the web. Even though it is a very logical and straight forward concept - it can be difficult to master; so take some time to read up on a few articles and practise. You'll soon start making sense of it :)

To illustrate the box model for visual reference - here are 2 diagrams to clarify (note: click the images for a larger view):

2D diagram via webeyedea

3D diagram © Jon Hicks

useful reading: box model

• box model on CSS Discuss Wiki
• Internet Explorer and the CSS box model on 456 Berea Street
• CSS positioning on brainjar.com
• The CSS Box Model on sitepoint
• Margins, Padding & The Box Model on Spyre Studios

positioning: CSS float property

As soon as you are taming your content - you will want to control the position of your "boxes". Read the following tutorials and articles as recap and dive in deeper ;)

useful reading: CSS float property

• Floatutorial by Russ Weakly
• css float, tizag
• All about floats by Chris Coyier
• Clearing Floats by PPK
• CSS Float Theory: Things You Should Know by Vitaly Friedman

✔ weekly task

Next week we will have the pleasure of welcoming a guest speaker, Sarah Read from GET (Guidance & Employability Team). Sarah will talk about writing a professional CV and presenting a successful creative portfolio, getting you ready for the big world of possibilities :)

Your task is to bring in your CV for review and analysis, according to the points made during the talk. You should take the opportunity to write a fresh version, up to date and carefully edited.

A useful link from Sarah, to help you with your CV writing:
→ Careers resources

read now: An Important Time for Design