86 Typography tips, tutorials, techniques & resources
Don't Be Afraid of Serif Fonts
"Seeing so many sans-serif fonts used in only so many ways on the Web isn't exactly tiresome, but it certainly does lend a certain charm to serif fonts when you seem them executed well in Web design."
5 Principles And Ideas Of Setting Type On The Web
"There are many ways to approach Web typography in order to create effective and expressive results. Let’s take a closer look at some principles, rules and ideas for approaching Web typography decisions — you can use them as a starting point for learning how to achieve effective type setting on the Web."
Better Pull Quotes: Don’t Repeat Markup
"Pull quotes are wonderful. They can really draw a readers attention and they are a great opportunity for cool typographic work. On a blog though, pull quotes are particularly difficult to “pull off” (get it?!)."
This is How You Get sIFR to Work
"The goal of this tutorial is to distill the information at the official site for sIFR into a simple step-by-step process of how to implement sIFR on your site. After following this tutorial you will have a basic understanding of how sIFR works and will be able to expand into more advanced areas."
Typography Essentials - A Getting Started Guide
"By understanding the underlying message that your choice of text contains, you will become more effective as you design and layout projects containing words and phrases. A picture may be worth a thousand words, but you have to know a thousand words to replace it."
Web Typography - Differences in Anti-aliasing
"Besides the differences between systems that use anti-aliasing and those that don’t, there are also different styles of anti-aliasing depending on whether you are using a Mac or Windows system."
On Choosing Type
"Typography is not a science. Typography is an art. There are those who’d like to ‘scientificize’; those who believe that a large enough sample of data will somehow elicit good typography. However, this sausage-machine mentality will only ever produce sausages. That typography and choosing type is not a science trammeled by axioms and rules is a cause to rejoice."
Justify My Text
"Factors affecting justification are the column width, type size, and width of the typeface used -- all of which contribute to the average number of characters per line, which is the most important factor in how justified text will look."
Popular websites’ logo typographies
"Sometimes, the typography used in a logo is a logo itself, without the need to add extra graphics in it. Therefore, in such cases, the font must be quite original because other brand may also use it and confuse both identities. In fact, hardly anyone creates an unique font for his logo, not even the big sites (I ignore why). Today, we’ll see the typography used in the logo of some famous websites."
Use custom type with sIFR
"Don’t let system fonts ruin the look of your site! Paul Wyatt explains how to make your headers look stunning with Scalable Inman Flash Replacement"
We All Love Typography
"When I see a good example of Typography, I just wonder why my designs don’t showcase that amazing element. Whether it’s spacing, font choice, position, kerning, I just can’t seem to get that look. I am always looking for designs that showcase amazing typography, below are 50+ examples of what I have found inspiring in my quest to achieve typography greatness."
Superb Examples of Slick sIFR Typography
"Sadly, like most things, sIFR is often misused. However, below is a showcase of some of the best and varied examples I could find. Some of them are just downright gorgeous."
Nice Drop caps with CSS
"There are a lot of websites using a extra -tag for the drop cap. But using the :first-letter pseudo-element, you can easily create nice drop caps with CSS. This pseudo element is included in CSS 1, so the browser support is very good. Let’s design some nice drop caps with CSS."
Design Matters: Fonts
"Most of us are familiar with fonts, as far as using Arial for headings and Times New Roman for body copy. But there is so much more to fonts than that. In this section, I’ll try and explain all the different options related to fonts, from classifications (yuck! I know), to how best to use them on screen, and in print."
Web Design is 95% Typography
"95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography."
Web Typography Sucks
Presentation by Richard Rutter and Mark Boulton on web typography. Includes slides, notes, and an mp3 recording of the session.
Top ten tips for web typography
"The latest issue of Design Edge Canada magazine – a publication for Canada’s graphic design industry – was a web typography special for which I contributed the following top ten tips for web typography."
Type Design Rules
OpenType
"The two main benefits of the OpenType format are its cross-platform compatibility (the same font file works on Macintosh and Windows computers), and its ability to support widely expanded character sets and layout features, which provide richer linguistic support and advanced typographic control."
A History of TrueType
"Apple had been developing what was to become TrueType from late 1987. At that time there were many competing font scaling technologies, and several would have been suitable for the Macintosh. It was by no means certain, according to lead engineer Sampo Kaasila, that Apple would adopt TrueType. In the end though, it proved itself on performance and rendering quality (at high and low resolution) against the others."
Glossary of typography terms
Classifying Type
A glossary of typographic terms
"This section provides a small glossary of terms frequently used in the type world."
Fine Tuning Web Typography
"Typography is a sadly neglected aspect of the web design process, an oversight traditionally blamed on the technical limitations and unpredictability of the medium. While it is true that the web may not offer designers the same typographic freedom as print, all it takes is careful consideration and a little typographic fine tuning to bring website layouts to life."
Expand Your Web Typography
"Most web designers know the common web-safe fonts, nearly all serif based sites are showcasing Georgia due to the inbred gag reaction most designers have to using Times because of its “default” status on the majority of computers."
Typography For Headlines
"A showcase of headline typographic design from across the web."
Know Your Type: Starting points for typographic inspiration
"Practicing good typography is at the core to good design. Computers are all grown up (they even come with two buttons we hear) and everyone, including yer mama, is making christmas newsletters with custom type—comic sans and all. Knowing your em-dashes, serifs and line heights is important, but the key is developing typographic control. Here are some points to consider."
It's About Legibility
"Typographic clarity comes in two flavors: legibility and readability. What’s the difference? Legibility is a function of typeface design. It’s an informal measure of how easy it is to distinguish one letter from another in a particular typeface. Readability, on the other hand, is dependent upon how the typeface is used. Readability is about typography. It is a gauge of how easily words, phrases and blocks of copy can be read."
Choosing Type Alignments for the Web
"Text alignment is always a tricky issue, especially on the web where we are at the mercy of text rendering, sizing, and window space all at the discretion of the viewer. However, all forms of alignment have their place on the web. But before we get to the decision making process, let’s have a closer look at our options."
Erik Spiekermann’s Typo Tips
"With the invention of “desktop publishing”, designers found themselves setting type on their computers for the first time. Until then, they had made type specifications for typesetters and left the job up to the professionals. As a result, you can still see classic inaccuracies in typesetting, even in top-quality printed matter. Here you will find some tips that will prevent some of the more obvious blunders."
Working with a limited font set on the web
"Typography and the web have never seen eye to eye - largely thanks to the limited type rendering capabilities of computers at the dawn of the web. Coupled with the academic (and non-design-oriented) bias of sites from this time, we're left with a legacy of a poor choice of fonts."
Web Typography Cheat Sheet
"Let's be honest. Typography and the web do not go hand-in-hand. You're limited to a choice of about 5 fonts, most of which are cheap knockoffs of 'proper' typefaces. You've got practically no fine control over kerning or line spacing, and - worst of all - there's a very good chance that no matter what you do, no matter how hard you try - your type is going to look different on every single browser and operating system. So what is an avid graphic designer-cum-web designer to do when faced with the seemingly insurmountable task of making web type look good?"
Typography: serif vs. sans-serif
"For years now, we've more or less accepted the unwritten rule of typography on the web: sans-serif is good for small(er) type on screens, whereas serif is good for such type on paper. Serif fonts for headings work well either way. But does this still apply? What about usability and, to an extent, accessibility? Is it time to seriously reconsider this?"
Thirteen Ways of Looking at a Typeface
"Those thousands of typefaces are still out there, but my recovery has required that I become more discriminating and come up with some answers to this seemingly simple question: why choose a particular typeface? Here are thirteen reasons."
The Effect of Website Typeface Appropriateness on the Perception of a Company’s Ethos
"This study investigated the effect of website typeface appropriateness on the perception of the site’s company. Results indicate that typefaces that are high in appropriateness should be used for websites. Neutral and low appropriate typefaces significantly decreased the perception of the company as judged by professionalism, believability, trust, and intent to act on the site."
The non-typographer’s guide to practical typeface selection
"Let’s be frank right off the bat: I don’t presume to be a typographer, or even anything close to an expert with a replete knowledge of typography and its history. Instead, I take a more practical approach to typeface selection, given the environment I’m generally in rarely requires that I need to complicate the process further."
25 Best Free Quality Fonts
"I’ve decided to create the Top 20 Best Free Quality Fonts, which are likely to be used rather for official, serious presentations (such as business sites) than a colourful teenager’s homepage."
13 typefaces every graphic designer needs
"With thousands of different typefaces on offer, it’s vital to have a select few that act as pillars in your collection. The following 13 typefaces (shown in alphabetical order) are ones that I believe every graphic designer should be familiar with."
Great Fonts for Web 2.0
"Fonts are an essential part of design - but there are thousands of fonts out there, so knowing which ones to use can be quite daunting. Here's a roundup of some fonts that have found popularity recently."
Printing the web
"The screen is just one of the media types for which we have to design for. Another media type, which I feel is often neglected as part of the design process for a web site, is print. There are times when a web designer has to know about print design. Not just the values and aesthetics of designing for print, but the terminology, measurements and production values that are important in print design—including typesetting."
The Right Glyph for the Job
"Typesetting is the composition of a body of text from raw material into a designed presentation. One of the aspects of Typesetting which seems to be lacking in the design profession—and I'm guilty as this as the next designer—is that of a thorough understanding of the written word. A total grasp of punctuation, grammar and structure and when and where to use them."
Calculating Font Sizes
"There are a lot of articles out there about typography on the web. I wanted to explain my method of controlling font sizes and margins in CSS."
What font says 'Change'?
"Typography can subtly or boldly define a company, product, or person. Whether it is Best Buy's big, bold, screaming signs or the sweet, elegant script on a wine label, the type talks to us, the reader. The logos of the presidential candidates are no exception."
15 tips to choose a good text type
"I want to take time to analyze how to choose correct text typography design in different cases. It is very important to understand that these tips are not final word, but they can be good help at the moment of choosing a text type. In any case, it depends on what do you want to convey with this type, because many times legibility is as important as the character of the type."
Color and Typography in Good Design
"Typography is a significant issue for designers. On many projects, finding just the right font, size, spacing, etc. can require considerable time and attention. In addition to typography, color is also a major factor in the success of the design. What is sometimes overlooked is the combination of color and typography and the effect that it has on the overall project."
Common fonts to all versions of Windows & Mac equivalents
"Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts". This is the reference I use when making web pages and I expect you will find it useful too."
Web Typography
"The fonts you use for your website are an important decision, as they will often reflect your site’s tone and affect its visual impact. Typography is an interesting field if you can appreciate the skills that go into the design of a typeface. Below is an introduction to typography, starting with font classifications and then going into the practicalities of online text."
Five simple steps to better typography
"Typography, I find, is still a bit of mystery to a lot of designers. The kind of typography I'm talking about is not your typical "What font should I use" typography but rather your "knowing your hanging punctuation from your em-dash" typography. Call me a little bit purist but this bothers me. So, in an attempt to spread the word here's the first of five simple steps to better typography."
The Elements of Typographic Style Applied to the Web
"In order to allay some of the myths surrounding typography on the web, I have structured this website to step through its working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers."
An Ode to Old-style Numerals
"All of the core Web fonts apart from Georgia have modern numerals. They are all equal width, and the same height as capital letters. They are great for tabular data because they line up vertically in tables which is probably their raison d’etre. They work perfectly with capitals, too. After that they start to fail. Miserably."
Smoothing out the Creases in Web Fonts
"Designers often choose one of the core Web fonts for body text because they are widely available, but like all typefaces, they render differently on different operating systems."
Simple Double Quotes
"This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote."
A Command of Headings: Usage and Styling
"I command thee, headings. Do not defy me as I am the all-powerful web developer. I am your master for I wield a style sheet with which I can make you mine..."
Our Favorite Typefaces of 2007
"Typographica’s fourth annual review showcases the best in new typeface design. Twenty-five of the world’s brightest graphic and type designers selected their favorite font releases of the year."
CSS Typography
"Traditional typography is a very subtle and beautiful form of design, with thousands of variations and choices. Unfortunately, with CSS that’s not quite the case. Don’t lose hope just yet, though. CSS can do more than you might think."
Alien Typography
"Many of the principles that the print typographer has learned and holds sacred, are no longer true when the medium is a neon sign, a television title sequence or a Web page. Text that is not printed on paper takes them into alien territory."
Typography and Web Advertising: Making Every Opportunity Count
"First, web ads must have content that matters to the target. Nothing is more important than a message that is fundamentally a mirror in which the target will recognize himself. Second, the presentation of the ad must be compelling, as well. Simplicity of presentation is critical, as well as visual difference. Our job is to craft a design that is distinct from its surroundings, and therefore noticeable."
Breathtaking Typographic Posters
"This post showcases over 50 breathtaking typographic posters designed by artists across the globe. We feature Oriental, Iranian, Hebrew, Japanese, Chinese and Russian typographic posters as well as a number of further references."
15 Excellent Examples of Web Typography
"Some of the examples mimic the typography of print, while others actually leverage web technology, smart CSS and delicious HTML to make their pages not only aesthetically pleasing, but legible, user-friendly and easily navigable."
15 Great Examples of Web Typography
"Last year I published 15 Excellent Examples of Web Typography, and owing to its popularity and people’s sateless appetite for lists, here are another 15."
13 Signs You’re A Bad Graphic Designer
"I have compiled 15 tell tale signs that you may still be considered a (don’t quote me) bad graphic designer."
Steps to Becoming a Freelance Web Developer
"After the popularity of my previous going solo article, I thought I’d lay out some more specific ideas on how to become a freelance web developer. Naturally, these are focused on web development, but could just as easily be applied in whole or part to other industries."
Web Typography Style Guide
"This guide covers the basics of good typography on the web, explaining theory behind font choices, and the details of providing accessible and good looking text."
The Funkiest Ampersands You Have Ever Seen
"Looking through large collections of typefaces highlights some real creative representations of the ampersand, many of which revert back to the traditional method of displaying the word ‘et’, others head for a more abstract approach. Here is a collection of possibly the funkiest ampersands you have ever seen!"
Book-style Chapter Introductions Using Pure CSS
"Today’s tutorial will show you how easy it is to create book-style chapter (article, whatever) introductions using nothing but pure CSS — no XHTML was harmed in the making of this tutorial."
30 Fonts That ALL Designers Must Own
"There are 15 serif fonts and 15 sans-serif fonts. These fonts will last you your whole career! A brief description of what each font is best suited for is provided however are not limited to this."
Questions to Ask Yourself When a Design is Coming Up Short of Your Expectations
"In this post we’ll take a look at some questions to ask yourself when a design is not living up to your expectations. These questions focus primarily on the design, not necessarily the effectiveness of the site overall, the usability, or the content."
Reading Design
"With so many specialists working so hard at their craft, why are so many pages so hard to read? Unabashed text enthusiast Dean Allen thinks designers would benefit from approaching their work as being written rather than assembled."
Typography Matters
"It’s a style thing. It’s a usability thing. It’s a tricky thing for large content sites and a step up for independents. It’s typographically correct punctuation on the web, and ALA’s Erin Kissane makes the case for it."
Setting Type on the Web to a Baseline Grid
"Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts."
The Trouble With EM ’n EN (and Other Shady Characters)
"More than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography. HTML specs, grammatical rules, browser bugs and character encoding—it’s all here, in this famous and much-bookmarked ALA article."
Dynamic Text Replacement
"Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow."
Power To The People: Relative Font Sizes
"Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution."
CSS Design: Size Matters
"Everything you think you know about controlling text sizes on the web is either wrong, or else it doesn’t work. In this much-bookmarked ALA classic, UI designer and CSS Todd Fahrner provides a way out of the mess by showing how to make CSS font size keywords work – even in stubborn browsers that get CSS wrong."
35 Designers x 5 Questions
"35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world."
Elements of Great Web Design: The Polish
"When I put together designs I usually do so in two phases - Layout and Polish. During the layout phase I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage - the Polish - I go over the design and adjust colours, type treatments, shadows, layers, and generally clean it all up."
Whitespace
"Whitespace, or negative space is the space between elements in a composition."
9 Essential Principles for Good Web Design
"I've put together my 9 principles for good web design, it's only my opinions and I've tried to link off to more reading on subjects so you don't only hear my voice."
40+ Excellent Freefonts For Professional Design
"In this article we'd like to present an overview of over 40 excellent free fonts you might use for your professional designs in 2008."
A Guide to Web Typography
"Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different."
Typographic Contrast and Flow
"By creating contrast, you can direct the reader's attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods to create typographic contrast."
The Anatomy of Web Fonts
"In this step-by-step guide, Andy illuminates the science of practical typographic theory and explains how it applies to the selection of attractive, usable Web fonts."
The Principles of Beautiful Typography
"Jason introduces the basics of typography before exploring its application online. With practical tips, resource lists, and expert advice on topics like text size and punctuation, this primer is essential reading."
Compose to a Vertical Rhythm
"Richard Rutter scrutinises the typographical proportions and spacing that gives a written page its rhythm."
Knockout Type - Thin Is Always In
"Shaun Inman reveals a powerful method for keeping light-on-dark text looking lean, mean and fighting clean. "
Typesetting Tables
"Mark Boulton revisits the HTML data table for a quick look at how legibility and communication of complex data can be helped through careful typesetting."