SEARCH DESIGN SCHOOLS Zip Code: Subject: Digital & Media Arts Fashion Design Interior Design Photography Graphic Design Animation Web Design Business Culinary Arts Education Healthcare Law & Justice Psychology Technology Technicians Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework Online Campus Both

home > Tips & Tutorials > TYPOGRAPHY : GRAPHIC DESIGN & USE OF FONTS

TYPOGRAPHY : GRAPHIC DESIGN & CREATIVE USE OF FONTS & TYPE

I love Typography - ILT is designed to inspire its readers, to make people more aware of the typography that is around them. We really cannot escape typography; it's everywhere: on road signs, shampoo bottles, toothpaste, and even on billboard posters, in books and magazines, online...the list is endless, and the possibilities equally so.

Graphic Designers from our Community

Typographica - A journal of typography featuring news, observations, and open commentary on fonts and typographic design.

Microsoft Typography Tips & Tutorials - This is an informational section about typography and fonts.

Nice Web Type - One place for web typography, leveraging our collective knowledge for the betterment of typographic style and practice.

The Font Feed - The Font Feed group lives for type. The FontFeed is an inspirational journal of typography tips, recommended fonts, and bits of design from around the web that caught our typographic eye.

A List Apart : Typography - 14 articles about beautiful typography in this List Apart section. Communicating via typefaces. Fonts and layout. Designing for readers. Legibility. Typefaces, graphic design. Problems of typography on the web. Controlling web typography: size, font, color. CSS methods, browser problems, user problems, and workarounds. Typographically correct punctuation. Unicode. Scaling text in modern browsers. And in IE for Windows, too. Replacing text with images: CSS, XHTML, SVG, and Flash methods.

Type Neu - TypeNeu is a social platform and source of inspiration dedicated to typography for all you typophiles out there. We report on the past, present and the future of typographic culture. Typophile is a common diagnosis, and yes this is the cure.

Ralf Hermann's Typography Blog - A blog all about type, typography, fonts, and design.

Font Lover - Fontlover.com showcases current trends in typography.

Typography Crash Course Roundup - The following resources are comprised of some of my favorite articles on the subject and some sites that should give most a great head start.

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.

Yuxt: Typography Videos - A roundup of Typography videos on Yuxt.

Planet Typography - The typographic experience online: directory, news, download & books.

The Elements of Typographical Style Applied to the Web - A practical guide to web typography.

Typography Web Style Guide - Here you will find out more about using typography in the best way online.

RSUB Typographic Guide - This is typographic, an interactive experience informed by type and typography. It aims to illustrate the depth and import of type, and to raise relevant questions about how typography is treated in the digital media, specifically online. A continuous work in progress, we welcome any suggestions and comments concerning the site.

Redsun Typography Glossary - Confused about what different typography words mean...check out this great Typography glossary.

No Font - Creativity shall burn out.

Baseline Magazine - For the best visual presentation and technical functionality of the website please use one of the following browsers: Firefox, Internet Explorer version 7, Safari.

Thinking with Type - This site is the on-line companion to the book Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students, by Ellen Lupton (Princeton Architectural Press, 2004). The book includes essays, examples, and practical guidance that does not appear on this site.

Graphic Obsession - Images, Type, and Motion.

The Font Site - Digital typography and design.

Truetype Togography - Everything TrueType

ABC Planet Typography - A virtual museum for typography.

Microsoft's Typography Group - Researches and develops fonts and font technologies, and supports the development of TrueType and OpenType formatted fonts by independent type vendors.

Type Box - Information about the places where we live and work, the roads we travel, and the messages we read are not always readily accessible or quickly understood. We use the visual vehicles of maps, images, and type to help us organize and understand. Our mission at Typebox™ is defining the connections, patterns, and relationships that make information clear and concise.

TypePhases - Offers a wealth of illustration fonts, stock image in vectorial form and other graphic design assets. There is a range of freeware materials and commercial work. The site also contains articles on graphic design and typography, and more.

Typography Articles

Web Typography : Intro to Font Families and Font Choices - An introduction to typography, starting with font classifications and then going into the practicalities of online text.

15 Excellent Examples of Web Typography - I will be taking an in-depth look at all these sites, delving into their grids, sifting through their CSS and dissecting their HTML, to discover what makes them tick — and what makes them excellent examples of typography for the Web.

15 Tips to Choose a Good 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. Try to be very careful and take in account the following points.

Anatomy of Web Fonts - If one aspect of design has suffered most in its transition to the Web, it is the art of typography. For years, Web typography involved little more than choosing a typeface and font size. Unstyled Times New Roman was the norm, and the integration of established typographical techniques and rules was unimagined.

Better Font Management - While free programs can provide the basic features of font management, heavy users such as graphic designers and typographers need higher-end tools with advanced features for managing their collections.

Choosing & Using Type Type. In your lifetime you've seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you 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.

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.

CSS Typography (Web Design) - You don’t often see “CSS” and “typography” used in the same sentence—and for good reason. 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.

Easy Type Modification Tricks - How to do various typography tricks.

EsperFonto There are two keys to finding the most appropriate typeface - Find out what they are

A Guide to Web Typography - Follow this recipe and your typography will rise up like…that’s enough of the culinary metaphors, let’s cook:

Five Simple Steps to Better Typography - In an attempt to spread the word here's the first of five simple steps to better typography. To kick it off, part one is about the Measure.

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.

Fonts on the Web and a List of Web Safe Fonts - So that when the end user, regardless of their machine preferences, goes to the web site they get the same experience as anyone else going to the web site.

How to Size Text in CSS (Web Design) - In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.

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.

Know Your Type - 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.

Motion Typography : 4 Approaches to Kinetic Text - In these four examples of motion typography in action, I have focused on examples in which the typography is the star of the show. Obviously, in the age of a million motion cut scenes, lower-thirds, station idents and commercials motion typography exists in a vast range of forms. These examples all push text and language play to the center of our attention, using four distinct approaches:

Paratype Font Classification Guide - There is no standard or orthodox type classification. Every type reference source reflects opinion and understanding of authors. Our classification is not an exception; don't be angry if you'll come to find out that it differs from other sources.

Power to People : Relative Font Sizes - Unfortunately, most existing methods for using resizing buttons ignore the user’s default settings. Here’s a simple solution for text resizing that respects users’ choices and also gives them an additional option for resizing.

Rules of Typography - Part 1 The Rules of Typography are reprinted from the book “Digital Type Design Guide” by Sean Cavanaugh (Hayden Books).

Sexy, Bold, and Experimental Typography - This post showcases over 70 examples of sexy, bold and experimental typography. Some examples are typographic posters, some are typographic illustrations and some are just sketches with type. In any case, you will hopefully find some inspiration for your future works.

The Non-Typographer's Guide to Practical Typeface Selection - This process primarily applies to web design, but I use a similar process for print design. And we’re speaking not of text rendered as HTML, but rather text rendered as images or using techniques such as sIFR. If you’d rather cut to the chase and see where all of this is headed, view this mock-up:

The Principles of Web Typography - Having the ability to set type with only a few strokes on a keyboard has allowed us to forget about the creative and artistic possibilities of this medium.

The Showcase of Big Typography - In this article we present over 35 examples of big, “loud” and yet elegant typography in web design; some listed designs are Flash-based, and in some cases designs are based not only upon typography, but also upon some visual elements.

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.

Type Palettes Is the primary purpose of document design aesthetic? To my way of thinking--no.

Typefaces That Work Together One of the most often asked questions about type is: Which faces work well together?  

TypoFile - Spec Sheets, Web Fonts, Techniques and technology

Typography Matters - There’s another aspect of online typography, however, that’s been almost entirely ignored: well-formed punctuation. Not just grammatically correct (that’s a good first step), but typographically correct punctuation.

Typography 1st Typography & Page Layout Tutorial - 14 page tutorial on text & page design.

Typography and Web Advertising: Making Every Opportunity Count - A balance between simplicity of letterform, such as a bold sans-serif, for example, and character will distinguish your ad from all others. Choose typefaces that are highly legible, yet have enough subtle quirkiness to be distinctive.

Typography For Headlines - A showcase of headline typographic design from across the web.

Typography Tips and Advice for Graphic Design Students - Typography was always something I struggled with in my college days. Looking back, I didn’t do nearly enough reading about typographers and great typography.

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 Cheat Sheat - Here is a good cheat sheat for web designers to have on hand.

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.

Typography Showcase Galleries

Behance Typography Spotlight - Check out beautiful typography on Behance.

Design Creme Showcase - A showcase of beautiful typograpy.

32 Inspirational Examples of Amazing Layout and Typography - All of the examples below are taken from paper magazine publications, there use of type and layout are phenomenal and there style could be easily adapted into any web page. They make you wonder if web design is influencing paper publications or is it the other way round. Either way these amazingly creative designers are setting modern web trends.

Beautiful Handwriting, Lettering, and Calligraphy - In the overview below you’ll find excellent examples of beautiful handwriting, creative lettering and professional calligraphy. It’s really amazing to see what one can create out of simple letters drawn with a pencil on a small piece of paper.

Flickr Typography Showcase - Browse beautiful use of type on Flickr.

Flickr Type Inspiration - Take a look at the typography collections.

Flickr Type Group - A great image group on Flickr.

Headings Style Gallery - Want something a little more stylish for your content headings (h1,h2,...) than a different font or color? Try one of the heading styles on this site to spruce up your content. These styles have been submitted for sharing, just click on the entry title underneath the sample styling to view the associated CSS and background images.

Illustrated Typography Showcase - Beautiful typographical art.

Pull Quotes Gallery - Gallery of pull quotes.

The Showcase of Big Typography - 1st Edition - In this article we present over 35 examples of big, “loud” and yet elegant typography in web design; some listed designs are Flash-based, and in some cases designs are based not only upon typography, but also upon some visual elements.

The Showcase of Big Typography - 2nd Edition - In this article we present further 55 examples of big, “loud” and yet elegant typography in web design; some listed designs are Flash-based, and in some cases designs are based not only upon typography, but also upon some visual elements.

Sexy, Bold, and Experimental Typography - This post showcases over 70 examples of sexy, bold and experimental typography. Some examples are typographic posters, some are typographic illustrations and some are just sketches with type. In any case, you will hopefully find some inspiration for your future works.

Showcase Superb Examples of Slick sIFR Typography - A showcase of some of the best and varied examples I could find. Some of them are just downright gorgeous.

Breathtaking Typographic Posters -Breathtaking Typographic Posters with over 50 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

Typography in Motion - Typography In Motion presents some excellent examples of typography embedded into movies and videos.

Typography is Sexy, Part I - Here are some really sexy uses of type, part 1.

Typography is Sexy, Part II - Here are some really sexy uses of type, part 2.

Typography is Sexy, Part III - Here are some really sexy uses of type, part 3.

Typography Tools & Gadgets

Bit Font Maker - This is not really AJAX but a very rich Javascript experience, BitFontMaker is an online bitmap fonts editor for Win and Mac allowing to create TTF fonts online simply by using a browser. The resulted application is amazing as fonctionnalities offered and many pixel graphics designer will be certainly interested into give it a try. It's easy to use but you'll need help to read the help page cause it's in japanese.

Baseline Rhythm Calculator - This is a useful tool for web designers to figure out the baseline for stylesheets.

ClearType Tuner - Use this online tuner to turn on and tune your Windows XP ClearType settings. If you experience problems download the Windows XP PowerToy version of the tuner. Please note that the online tuner does not currently work with Windows Vista.

Code Style Font Sampler - The Code Style font sampler is a guide to the most common Web fonts. Select your platform to contribute to the font survey, or see the results pages for font samples and images.

Cool Text - Cool Text is a free graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. Simply choose what kind of image you would like. Then fill out a form and you'll have your own custom image created on the fly.

Colour Contrast Checker - The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast when viewed by someone having color deficits or when viewed on a black and white screen

CSS Type Set - Typography tool allowing designers and developers to interactively style their web content. Enter the text you want to modify on the left, adjust font-family, font-size, color, text-align, line-height, ….. and view generated CSS code on the right.

CSS Type - Web Safe Typography on Screen for Pixel Perfectionists.

CSS with Vertical Rhythm - CSS with vertical rhythm. This tool will help you compute CSS that has a consistent vertical rhythm.

Designer Plaything - A tool that allows designers and clients to experiment with different web typography and colour combinations on a page as well as check for colour accessibility level.

em Calculator - Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

Font Match - A desktop font identification solution that looks at the fonts on your computer. From their site.

fontBROWSER - This flash application will allow you to quickly preview the fonts active on your system. Really neat online browser for your installed fonts.

Font Tester - Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.

Fontifier - Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.

Font Struct - FontStruct is a free font-building tool brought to you by the world’s leading retailer of digital type, FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. You create ‘FontStructions’ using the ‘FontStructor’ font editor. Once you're done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application. You can keep your creations to yourself, but we encourage users to share their "FontStructions". Explore the Gallery of fonts made by other FontStruct users and download them or even copy them and make your own variations.

FontXplorer - Free to download. Organize your fonts just like your media files – using a library, folders, tags and even smart sets. You want direct access to all typefaces from a certain foundry? All italics? Or all fonts tagged with a certain keyword? FontExplorer® X makes this easy! All fonts and formats are recognized automatically and can be managed in a comfortable way. You decide whether FontExplorer X should take control over the folder structure, or if you want to leave it untouched – we built this software to be as unobtrusive as possible.

Horus - In our experiments with Raven, our Flex-based vector editor, our programming team needed to find a way to convert fonts into editable outlines. This meant being able to parse True Type Font (TTF) files and read their contents into editable vector graphics. We accomplished this task and realized that this experiment had another very useful application: allowing people to edit and create original font files in their browser (or as a downloadable AIR application).

Identifont - The largest independent directory of typefaces on the Internet, with information about fonts from 506 publishers and 141 vendors.

Lorem Ipsum - A site that generates Lorem Ipsum text for dummy pages / mock pages for designers.

My Fonts - What The Font?! - Ever wanted to find a font just like the one used by certain publications, corporations, or ad campaigns? Well now you can, using our WhatTheFont font recognition system. Upload a scanned image of the font and instantly find the closest matches in our database. If WhatTheFont can’t figure it out, you can submit your image to the WhatTheFont Forum where cloak-draped font enthusiasts around the world will help you out!

sIFR - sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

Type Navigator - The World's first interactive visual font search system. "Visual" means that you don't need to know anything about the font that you are looking for. All you need is the image of the font that you want in your head.

Typetester - The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

Free Online Font Tools - Mega List of Web Based Font, Text, & Type Tools - Graphic Design and Typography are deeply connected. For that reason, I figure that most of you are going to love these free online font and type tools. Most, if not all, of these are very useful and I recommend that you use them when you have a chance. Below you will find the huge list of free browser-based font and type tools.