Web design tutorial – How to identify fonts/typefaces

Posted Friday 13th Apr 2012 by James Bavington

In this week’s web design video blog – I’ve prepared a short and sweet video for identifying fonts on websites. Many designers, myself included spent a lot of time browsing the internet and checking out different designs, fonts and techniques that are used by web designers/developers.

The new age of HTML5 and CSS3 had introduced new techniques for embedding fonts – that go beyond the default system fonts that we’ve all become accustomed to for over 10 years.

In the video tutorial I demonstrate a popular new Chrome/Safari Extension called ‘WhatFont‘ that allows designers to hover their mouse over real-text typography, unlocking information about the typeface being used. WhatFont even highlights whether the font has been sourced from Font libraries such as Google Web Fonts and Adobe’s Typekit.

The second tool that I check-out is Myfonts.com’s ‘What The Font‘ tool. This free online web page allows you to upload flattened graphics of typography and it will try and workout for you what the typeface is that’s been used.

By James Bavington

Creare's Web R&D Manager is a creative graduate and self-taught front-end developer. When not sat at a computer, he's either at Comic-con, driving his car or reading military history.

See all of posts.

Connect with James Bavington on Google+

James Bavington's latest tweets

  • Font Awesome 3.0 released with 40 new icons, 21% smaller size, spinning icons, Twitter Icon updated, Sub-Setting & more http://t.co/xUwuHvIC 14 hours ago.
  • Web Design: 20 Hottest Trends To Watch Out For in 2013 http://t.co/1lZ7OQlB 18 hours ago.