Essential Typography Tutorials and Resources
As content creators, it's our job to ensure that anyone who looks at our work understands it both on an informational and also emotional level. When you communicate using written words, clarity and context can get lost in translation - whoever reads your words ends up interpreting them for themselves, no matter how concisely you write.
In the modern age, we use computers to create beautiful presentations of information, and we use the web to share it. Since the web is mainly made of type information (around 95% typography, actually), it is critical to understand how to use the web to your advantage to better present your information.
Taking this into consideration, we have taken great care to find you only the best instructional tutorials and articles to help you learn about typography.
Essential Typography Tutorials and Resources
This series offers an extremely detailed and robust course in the art of making your letters and words visually appealing. Lesson 1 covers typographical topics like associating meaning with type, letters as pictures, typographical terms, historical and stylistic categories, the secrets of legibility, letter spacing, line height and line length, X-height, weight and serifs, and also has a great list of suggested reads. Lesson 2 covers the application of typography on the web, covering topics like pixels, HTML and CSS, points and measurements, GIF images, Flash, SVG, Acrobat, and offers another list of additional resources both on the web and in print.
This is a very thorough resource for teaching yourself how to create those dazzling typography effects that normally just leave you drooling.
WebExpedition also recently posted a Showcase of Designs with Delicious Typography.
These tutorials explore the graphical element of typography - using programs like Photoshop and Illustrator to achieve great looking text. The article includes lessons on creating poster designs using only type , 3D type illustration, and other eye dazzling lessons like making a splash with type, watercolor typography, smooth glass type, exploding type, flaming meteor type, milky type, steam powered type, flaming type, grassy type, and even lessons on using real 3D illustration programs like Cinema 4D to create beautiful typography.
These tutorials include a good helping of CSS type tutorials and examples, lessons on improving typography in your designs, making the perfect paragraph, scale and rhythm, analysis of type on the web.
This compilation includes many great lessons to help you understand and efficiently implement typography when working with the web. Lessons include typographic contrast flow, CSS font stacks, gradients, pull quotes, curly quotes, how to style block quotes, the grid system, white space, proportion, alignment, and many others. InstantShift also includes many additional resources and great examples in their article, including a comprehensive list of typography tools and apps.
This comprehensive guide covers technical coding issues like how to choose a font face, size, use a grid, measure, vertical rhythm and baseline grids, typographic scale, how to use proper quotes, dashes and ellipses, how to hang punctuation, and dealing with images in grids.
This tutorial is a good beginning resource for designers who want to develop their skills in typographical design for modern web applications using HTML5. Topics covered include using HTML5s Canvas element to draw and color text with gradients and effects, and create interactive typography effects.
These tutorials cover a range of topics from general typography, web typography, font design and creation, and a recommended book list for those interested in reading (real books) about typography.
Thinking with Type is an incredibly deep and insightful website and one of the seminal books on typography of our age. The site isn't just a purchase page for the book, either; it's also one of the most beautiful information repositories on the web about typography, covering topics like Letters, including anatomy, size, scale, type classification, type families, super-families, caps and small caps, mixing typefaces, numerals, punctuation, typeface design, & font formats. Text, including kerning, tracking, line spacing, alignment, vertical text, marking paragraphs, enlarged capitals and hierarchy.
Grids, including the Golden Section, single column grids, multi-column grids, and modular grids; also, a slew of extras including tools for teachers, type crimes, guides on editing, for both soft and hard copy, proof-reading, and of course a bio on the author of the site (and the book) , Ellen Lupton.
This essential and controversial read caused quite a commotion among the design community when it was published due to making some very bold statements about the size of type making or breaking your presentation.
This quick guide covers the ins and outs of the @font-face tag, including where to get font-face kits, how to upload it to your server, using font-face in your stylesheet, limitations, and some further reading.
This incredibly deep, technical, and eloquent article by Tim Brown, Type Manager for TypeKit (an Adobe service for web font management) dives into the math behind the golden ratios of typography and typographical design. The article mainly covers modular scales (pre-arranged proportions for scalable designs), including the math behind modular scales, challenges, formulas, and how to create your own.
Tim recommends The Elements of Typographic Style as a further read to learn about modular scales, and also recommends his own inspiring 30 minute video presentation on using typographic tools and perspectives video presentation on using typographic tools and perspectives for designing websites.
This showcase is meant to further inspire you to create progressive and beautiful typography. Hongkiat also hosts an amazing guide for better typography in modern websites - this guide specifically looks at the bleeding edge standards for web typography and design, like the differences in todays internet vs. yesterday, modern trends, like webpage headers, unique hyperlinks, styled lists, in-page quotes, and guides to using custom web fonts like Typekit and Google Web Fonts, in addition, there is included a great list of references and required reading materials.
This guide to all things type on the web is a great resource to refer back to quickly if you are in the middle of designing a website, due to its reference style format.
Additional Typography Resources
Once you dive into the world of web typography, there is a seemingly infinite wealth of information you can reference to learn this essential communication and design standard. Some of our favorite sites to keep up with and learn about the ever expanding world of typography are:
- Type Daily: a typography aggregator about all things lettered on the web
- I Love Typography: a frequently updated typography blog
- Font Feed: a blog dedicated to all things fonts
- TypoPhile: a very active forum about typography
- Typographica: a site devoted to type reviews, books, and commentary
- Type Directors Club: an international organization that supports excellence in all mediums for typography. The Type Directors Club hosts two yearly type competitions - one for the implementation of type in design, and the other for the design of type itself.
Presenting written information, especially on the internet, requires you to bridge the gap between what you mean and what people hear by making your presentation visually appealing. The stylized presentation of letters and words is called typography. Typography is essential for any written communication - it is the visual representation of emotion, tone, and character. Whether you are a designer or a writer, it is imperative for you to understand both how and why people respond to typography, allowing you to use typography to your advantage.
Typography can make or break the connection people feel when they are presented with your content for the first time. Typography is a serious business, but it's also extremely fun and rewarding.