The Fontography Series is supported by join.me, the easiest way to have an online meeting. join.me lets you instantly share your screen with anyone, for free. Use it to collaborate, demo, show off — the possibilities are endless. Try it today.

Creating a font is no small undertaking. In fact, it is possibly one of the most complex design tasks out there. Careful attention must be paid to detail and consistency at all times and often hundreds, even thousands of characters (glyphs) must be created. While there are a variety of tools out there to manage and simplify this process, there’s no doubt that font design is a serious business.

But what happens when you want to use that font on the web?

Typography for the web has come a long way in recent years. Not so long ago, displaying a custom font on your webpage meant using an image, a Flash component like sIFR, or simply crossing your fingers and hoping that the user would have the font installed on his system. However, with all modern browsers now supporting the @font-face CSS property and JavaScript tools such as kerning.js (giving designers greater flexibility for displaying type), the days of limited typography on the web are quickly being relegated to the history books.

SEE ALSO: 7 Free Tools for Creating Your Own Fonts

Tools such as Font Squirrel’s @font-face Generator give you limited, but often serviceable automated conversion of user-supplied fonts. Font foundries are making more and more typefaces available for the web all the time, through services like Type Kit, Fonts.com, or their own retail solutions.

However, for those fontographers looking to build their own web fonts, or who want more refinement than automated converters offer, a more detailed approach may be in order. We’ve outlined a few important considerations for web fonts below.


Font Formats


For starters, to achieve as much browser compatibility as possible, you’ll need to convert your font to at least four formats; the original TrueType (or OpenType) format, the Embedded Open Type format, the Open Web Font Format and a Scalable Vector Graphic format.

Many font creation tools support these formats natively, or allow you to export to them, but if yours doesn’t, you can still use online conversion tools like the @font-face generator, and then open each format individually and clean it up as needed. While this can present its own set of problems, it does allow for some additional control over the look of the finished product.


Unicode Character Support


The web often creates completely different use cases than print, so you may need to extend your font’s glyph library in order to support more unicode characters. If you’re designing your font for general purpose use and widespread distribution, this can sometimes mean adding hundreds or even thousands of new glyphs.


Your Kerning Data Will be Lost



Any data your font contains with regard to character kerning will be lost (or ignored by the browser) once your font is converted to web formats. This means all those hours you spent carefully calculating many of your font metrics will no longer be of use. To compensate, you may have to modify existing glyphs to ensure proper scaling and spacing, and you may need to create or remove ligature glyphs.


Font Outlining


If you’ve created your font with PostScript outlines (which many fonts use), you may find that you need to convert your font outlines to TrueType, in order to achieve more precise and clean font rendering, particularly at smaller sizes. Since fonts are created in a vector format, converting those vectors from PostScript to TrueType may mean adding additional nodes to a glyph’s outline, or that some control data is lost. Many times, this may mean that your font requires a round of manual clean-up to remove superfluous nodes on your glyph, or to refine the outlines, as they may have changed subtly during conversion. Poor outline conversion can mean jagged fonts and larger file size.


Keep It Small


Since you’ll be serving up a number of font formats over sometimes-slow internet connections, you should do everything in your power to keep the font’s file size down to a respectable value. There are a number of ways you can optimize your font for a small footprint. For example, take the time to manually delete font metrics that don’t convert from the original TrueType (or OpenType) format, keep font outlines as simple and efficiently drawn as possible, use TrueType components to build accented characters from non-accented glyphs and try to keep meta data to a minimum.

These are just some of the many considerations to take into account when converting a font for wide-spread use on the web. However, as you can see, while many auto-conversion utilities and generators can simplify the process for specific use-cases, optimizing a font for full web support is no small task. Fortunately, many font foundries are now jumping on the bandwagon.


Series supported by join.me



The Fontography Series is supported by join.me, the easiest way to have an online meeting. Named one of Time magazine’s best websites of 2011, join.me lets you share your screen so you can instantly get together, collaborate, demo, show off, and more. Plus, it’s totally free. How will you use it? Check it out today.

More About: contributor, features, Fontography Series, mashable, text generators, typography, web fonts

For more Dev & Design coverage:





The Fontography Series is supported by join.me, the easiest way to have an online meeting. join.me lets you instantly share your screen with anyone, for free. Use it to collaborate, demo, show off — the possibilities are endless. Try it today.

Only in the past few years has typography for the web really come into its own. Many web designers lack the specific training and years of focus on typography as in other disciplines, like print publishing. But, that doesn’t mean that an attractive, web-safe font is out of reach.

Here, we outline four tips for choosing the typography that will best convey your message in an easy-to-read manner on your website.


1. Readability


The first and foremost aspect to keep in mind when choosing the perfect font should be readability. Aesthetics are completely useless if the content is illegible. Many designers balk at the idea of using browser defaults when it comes to font rendering — and this is certainly understandable — but there’s one important takeaway from those defaults: They’re easy to read.

When choosing a font for the copy on your site, simple is better. Keep things clean and don’t develop an over-complicated type. You can get more creative later with things like headlines and pull-quotes, but your body copy should always be clear and easy to read at around 13px. A medium-weight font that is either a simple serif or sans-serif font usually works well here.

Keep contrast high when styling the font of your choice, and don’t over-use font sizes below 13px. It’s also generally not a good idea to reduce line height below the default setting (though it can often improve readability when you increase it a little). Unless you’re after a very specific look, it’s generally considered bad form to have more than three different font families on the same page.


2. Mood and Message


Your font can say as much about your site as any image on the page. Like other page elements, fonts portray mood and emotion, just like color scheme and graphics do. Heavy fonts convey strength, lightweight fonts give an air of openness and space, decorative fonts add whimsy. Coupled with scale and color choices, these can be powerful tools when conveying feelings and attitudes to your reader.

For instance, bold headlines feel very loud and confident. When you come across a large, bold headline, it’s impossible not to avoid: It grabs you. Conversely, a headline written in a lighter font is more unobtrusive and conveys its message without getting in your face to do so. Open fonts feel more free and often convey more movement.

Along with not having too many fonts on your page, you should also avoid too many differing font weights. Pick a style that works well in conjunction with the rest of your design and stick with it, making occasional use of contrasting style to highlight specific elements that the reader should pay special attention to, like headlines or captions.


3. Font Metrics


Let’s get technical for a moment and talk about font specifics. When working in a print medium, designers have a lot flexibility with regard to font metrics. That is, they can easily control the size of specific elements, the spacing between them, and the way that letters interact with one another. When it comes to the web, that level of control simply doesn’t exist, so it’s important to choose a quality font to begin with.

This is where we have to inject a word of caution about many free fonts. Designing a font is hard, detailed work, and a lot of amateur font designers simply lack the experience to pull off great font metrics. Free fonts often suffer from poor kerning (the spacing between font glyphs), inconsistent x-heights and cap heights (the heights of the middle and top of the font glyph) and so on.

Not all free fonts are bad, of course, but when choosing a typeface, it’s important to look at the font as a whole and not base your decision on a few sample words. Create some paragraphs of text and pay close attention to the way the letters flow into one another and measure up against each other. The specifics here can get really technical and complex, but in a nutshell, you’re looking for consistency in rendering between glyphs, readable letter spacing and a comfortable line height.

If you require a little more control for your fonts, check out Kerning.JS, but keep in mind that users without JavaScript enabled or browsers that don’t support Kerning.JS’s features will see the font you’ve chosen in its unaltered state.


4. Cross-Browser and Cross-Device Issues


Finally, it’s important to remember that not everyone accesses the web in the same way. There are dozens of combinations of device hardware, operating systems and screen resolutions, and each operating system and browser will render fonts differently, even if that difference is at an extremely subtle, sub-pixel level. This is another reason — perhaps the biggest reason, in fact — why it’s important not to overcomplicate your typography.

Much like it is often impossible to achieve pixel-for-pixel rendering of other layout elements across operating systems and browsers, the same is true for text on the page. Good web typography means knowing when to be flexible. That might mean choosing a different font for 480px mobile, for instance, or adjusting font size and contrast for small screen displays. Be adaptive.


Fonts can greatly affect the aesthetics of your site and can convey a lot of meaning in their visual appearance, but remember, when it comes to a choice between looking good and being easy to read, always go for easy to read.

Do you have tips for choosing a font? What font do you use on your website?


Series supported by join.me



The Fontography Series is supported by join.me, the easiest way to have an online meeting. Named one of Time magazine’s best websites of 2011, join.me lets you share your screen so you can instantly get together, collaborate, demo, show off, and more. Plus, it’s totally free. How will you use it? Check it out today.

More About: contributor, features, Fontography Series, mashable, typography, web fonts

For more Dev & Design coverage:


The Web Designer Series is supported by Wix.com, a free Flash online builder that makes website creation a breeze. Click here to create your own website now.

According to Prevent Blindness America, 53.2 million Americans aged 45 or older have some form of visual impairment, from mild to severe, and about 18% of those affected are “legally blind.” Despite their visual impairments, many of those people use the Internet every day, just like you and me. Further, as more and more people over the age of 50 become comfortable with technology, Internet usage among this demographic will only increase in coming years.

The web is full of tips on how to design websites for blind users, most of which are geared toward making your website accessible to screen readers. But as you can tell by looking at the numbers above, there is a large middle ground. The vast majority of individuals with visual impairments, even those considered legally blind, don’t need or use screen-reading software. However, the web can still be a difficult and cumbersome place to navigate when one can’t quite see it clearly.

Here are a few tips and techniques for making your site more accessible to these visually impaired users — and why they’re important.


1. Make Allowances For Enlarged Text


Often times, simply making text larger is all that a user requires. Consider offering alternate stylesheets with larger font sizes and make sure your layout doesn’t break when text-only zoom is enabled in the browser. Many visually impaired users will want to zoom in on the text without changing the scale of the entire site layout, which can lead to difficulties scrolling and tracking text over long lines.

Depending on your site’s target market, you may also want to consider making the default font a few points larger, and if you’re publishing articles or large quantities of text, it’s a good idea to offer text-only versions, so the user can then manipulate the text however he likes.


2. Contrast is Key


Eye diseases like Retinitis Pigmentosa, Glaucoma, Retinopathy and cataracts (some of the most common eye disorders out there) all lead to a significant decrease in contrast sensitivity — that is, the eye’s ability to differentiate between similar shades and levels of brightness.

But today’s layouts are detailed-oriented, often utilizing subtle gradients and slight shifts in value to create clean, modern, unobtrusive interfaces. For a user with normal eyesight, this makes for a very pleasing visual experience. To a user who struggles with contrast sensitivity, however, it can be a literal headache.

Consider offering a second version of your site with more contrast between elements. Make use of bold text for added readability on low-contrast items and avoid very thin fonts. Also, don’t use any JavaScript or CSS techniques that would prevent users from highlighting elements of the page with their mouse or change the default highlight behavior. Many visually impaired users make use of highlighting as a quick trick to increase contrast and to aid visual focus.


3. Be Mindful of Colors for Action Items


Genetic colorblindness affects about 8% of all men and about 0.5% of all women to some degree. Then there’s acquired color blindness, which can result from eye disease or injury (such as glaucoma or cataract) and drives the total number of colorblind users even higher. It may not always be feasible to offer these users an entirely different color scheme, and most users generally accept this. However, there is one place, where the use of color should be given the utmost attention — action items. When creating buttons or notices that call the user’s attention and require their direct interaction, try to avoid using color combos that are easily confused by colorblind users (red and green, blue and yellow) and make sure these elements contain clear, visible text or iconography that makes their purpose clear.

Placing a red “cancel” button next to a green “submit” button, for example, might cause visual confusion to a user who is red-green colorblind. Similarly, users with the seemingly misnomered “blue-yellow” colorblindness (more common in acquired colorblindness) are less able to differentiate between shades of green and blue.


4. Let Desktop Users Browse Your Mobile Site


If you offer a mobile version of your web site, don’t restrict it only to mobile devices. Layouts optimized for the mobile web are typically, by nature, more visually accessible than their more grown-up counterparts. Elements are often simplified (and thus easier to scale), more focus is given to text, and there is less overall visual clutter to potentially confuse users who have blurred vision or difficulties with contrast and color. Giving anyone access to the mobile version of your site
can be a quick way to increase accessibility without adding a lot to development costs.

Note, though, that while they can be quite useful for sighted persons with vision problems, mobile websites that utilize large amounts of JavaScript and AJAX functionality are not ideal solutions for blind users who need to access the web via screen reading technology.


5. Use Keyboard Shortcuts to Aid Navigation


In addition to being useful to persons with screen readers, keyboard shortcuts can make site navigation for the visually impaired user far easier. With the addition of keyboard commands, it’s possible to navigate a site with the use of arrow keys and a few quick keystrokes, eliminating the need to follow a mouse cursor across a screen — and the associated need to keep shifting visual focus. This can go a long way toward reducing eye strain and frustration. Many users with visual impairments surf the web on large monitors (23″ or bigger), which can lead to a lot of head and eye movement, particularly at shorter focal distances. The less time the user has to spend following the cursor (which can easily become lost) around the screen, the better.


Series Supported by Wix.com


The Web Designer Series is supported by Wix.com, which brings amazing technology home to everyday people. Discover the amazing simplicity of its online Flash builder and enjoy creating beautiful websites with powerful drag and drop interface.


More Design Resources from Mashable:


A 12-Step Guide to Fostering Your Creativity
8 Powerful & Inexpensive Desktop Design Apps
HOW TO: Get Started with the Less Framework
8 Essential Web Typography Resources
HOW TO: Turn Your Foursquare Data Into an Infographic

Image courtesy of iStockphoto, nu_andrei

More About: List, Lists, web design, web designer series, web fonts

For more Dev & Design coverage:

The Future Web Series is supported by Elsevier‘s SciVerse Application Marketplace and Developer Network. The SciVerse applications platform enables developers to build apps based on trusted scientific content. Learn more.

Over the last 12 months, the momentum behind HTML5 has continued to build, with application developers, browser makers and hardware vendors fully embracing and supporting the web of the future. Consumers have started to embrace HTML5 as well, especially as more users understand the benefits and potential that HTML5 can mean for the future.

With Firefox 4, Google Chrome, IE 9, Safari 5 and Opera all offering better, more robust support for HTML5, CSS3 and JavaScript, we’re already seeing glimpses of what is possible and what the web of the future may look like.

Let’s look at some of the aspects of HTML5 that are already making their mark on web app development.


Better Typography and Custom Fonts


The Web Open Font Format, or WOFF, might technically be part of the HTML5 specification, but WOFF, SVG and the CSS3 @font-face specification are all commonly used additions to HTML5.

The adoption of web fonts, whether it’s using WOFF, services like Fonts.com, Typekit or the Google Web Font API is increasing at a rapid pace. This development gives content creators, brands and developers a way to better express and control the most important part of an app or website — the text — without having to rely on images or Flash implementations that don’t always work well for translated text or with search engines.

Since first highlighting this trend last year, the number of web apps that support custom fonts using Google, Typekit, Fonts.com or any number of other solutions has only increased. We expect this to continue, especially as adoption of the latest and greatest web browsers continues to grow.


Frameworks, Boilerplates and Toolkits


Last year, Paul Irish and Divya Manian introduced HTML5 Boilerplate to the world.

Over the last seven months, the project has exploded and grown in both scope and support. As we said last year, HTML5 Boilerplate is not a framework. Instead, it’s a template that can be modified by developers for their own use.

HTML5 Boilerplate 1.0 was released on March 21, 2011 with support for optimized build scripts, a custom boilerplate builder, and perhaps most excitingly for app developers — support for lighttpd, Google App Engine and NodeJS, as well as old favorites Apache, Nginx and IIS. The number of websites using HTML5 Boilerplate continues to grow and evolve.

Other companies like Sencha are also working to bring better and more evolved frameworks and toolkits to web app developers. The upcoming Sencha Ext JS 4 is a JavaScript framework optimized to support HTML5 and other web standards.


Examples in the Wild


When Google launched its Chrome Web Store last December, it was one of the best showcases of what HTML5 web apps could offer users.

Over the last few months, more apps have been added to the store and more companies have started to optimize or rewrite their web apps specifically with HTML5.

TweetDeck is one of the most popular Twitter clients on the desktop and is revered by users. Chrome TweetDeck (or ChromeDeck) was one of the big standouts last winter, and it continues to set a high standard for what users can expect from a web application. It’s also the most popular app in the Chrome Web Store.

Earlier this month, TweetDeck announced the limited beta for its TweetDeck Web product. Built using HTML5, TweetDeck Web takes the core of the TweetDeck Chrome app and applies it to other platforms and browsers. The goal i
s to make the TweetDeck experience browser- and device-agnostic, and it is part of TweetDeck’s broader strategy approaching mobile and desktop apps.

Creative web app company Aviary introduced Feather, its HTML5 Photo Editor, last year. Feather isn’t only a lightweight image editor with lots of cool effects. It can be seamlessly embedded into other web apps to give additional functionality to developers who don’t have time or money to create their own solutions.

In April, Aviary announced its plans to open up its Effects API to web and mobile developers. This will allow developers to easily add effects and filters, auto-correct photos and create thumbnails or quick crops without needing user interaction.


The Future is Bright


I firmly believe that we will continue to see the worlds of web applications and desktop apps converge. It’s already happened with email, chat and social communication — the next step is to make it viable for data processing, multimedia and, ultimately, web development itself.

HTML5 is going to play a big role in enabling web developers do more with pure web apps, without needing to rely on third-party plugins or extensions. As browsers become better attuned and optimized for the evolving HTML standard, the opportunities will only increase.


Series Supported by Elsevier


The Future Web Series is supported by Elsevier‘s SciVerse Application Marketplace and Developer Network. In 2010, prominent science publisher Elsevier launched SciVerse to provide developers with access to ample research data so they can build apps on top of trusted scientific content. SciVerse also sponsors “Apps for Science,” a $35,000 developer challenge to accelerate science. Learn more.


More Dev and Design Resources from Mashable:


8 Powerful & Inexpensive Desktop Design Apps
Why Everyone Is Talking About Node
How JavaScript & HTML5 Are Remaking the Web
8 Essential Developer Apps for Multiple Platforms
8 Essential Web Typography Resources

HTML5 Logo by W3C

More About: Aviary, Future Web Series, HTML5, html5 boilerplate, sencha, tweetdeck, web app development, web apps, Web Development, web fonts

For more Dev & Design coverage:

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Over the last eighteen months, the world of web fonts and web typography has absolutely exploded. Modern browsers — on the desktop and on mobile devices — are embracing the WOFF standard, type foundries are adopting web type en masse, and libraries like Google Web Fonts are making it easier for designers and developers of all stripes to use web type in their projects.

The rise of web fonts has coincided with a greater cultural recognition of type in general. The hugely popular documentary Helvetica introduced a brand new audience to the power of type. For users who want to learn more about type and web fonts, the web is full of great resources that offer good examples of typography and explore the history and future of lettering and design.

Here are eight of our favorite sites to help you start or enhance your own education in type.

1. Fonts In Use

Fonts In Use is a beautiful site that, in its own words, aims to “catalog and examine real-world typography.”

A collaboration between Sam Berlow, Stephen Coles and Nick Sherman, the site offers insights and deep examinations of typography across various mediums.

This is a great site not just for typography fans, but also for those who want to learn more about what makes for effective typography and effective uses of type.

2. I Love Typography

First launched in 2007, I Love Typography is the brainchild of John Boardley. The blog now has a host of contributors who highlight great fonts and showcase beautiful type, while also offering the reader a basic education in typography.

Through the years ILT has remained accessible to newcomers and that’s why we like it. Be sure to check out Boardley’s next project, Codex Magazine, which launches soon.

3. Typographica

Typophile is a typographic community that has been on the web for nearly a decade. The forums are a fantastic resource for great finds in the world of type, and they’re also a great way to get proper feedback from other type lovers and design professionals.

5. Typedia

Webfonts.info

Tim Brown is the type manager at Typekit. He also is responsible for the fantastic font blog and resource, Nice Web Type.

The main Nice Web Type site offers a great collection of past notes and access to Brown’s blog, however, we encourage users to also visit the Nice Web Type Tumblr.

8. The FontFeed

The FontFeed is FontShop’s daily feed of typographic goodness. The site is chock-full of type recommendations, font news and great examples of digital type in the real world.

One of our favorite sections of the site is Type Tips, which highlights tips and tutorials, while also showcasing interviews with big names in the type world.


Series supported by Rackspace


rackspace

The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.


More Dev & Design Resources from Mashable:


Ruby on Rails: Scaling Your App for Rapid Growth
HOW TO: Transfer Your Blog From WordPress.com to WordPress.org [VIDEO]
A Beginner’s Guide to Integrated Development Environments
10 Chrome Web Apps to Check Out
10 Tools for Getting Web Design Feedback

More About: fontfeed, fonts, fonts in use, I love typography, nice web type, type, typedia, typekit, typographica, typography, typophile, web development series, web fonts, webfonts.info

For more Dev & Design coverage:




font image

Anders J. Svensson is a freelance writer, part-time adventurer, and the senior copywriter at Veer -– a provider of affordable images and fonts to creative professionals. On Twitter, find Anders at @mightyrival and Veer at @veerupdate.

It’s a text-based world. Everywhere you look, there’s a sign, an ad, or a screen relaying information. The hand-lettered signage at your mom-and-pop corner store aside, most of the messages you see are set in familiar fonts.

You’ll find plenty of tips and tricks on using type elsewhere –- and far more technical ones, at that –- but here are some select ideas and advice that will put you (and your online presence) on the path to becoming a font savant.


Know Your Fonts


If you’re wired and online, fonts first fall into three categories: The system fonts that came with your computer, the somewhat tacky fonts you can download at free sites, and the really nice fonts you might pay for if you are in the habit of paying for fonts.

Within each of those categories, fonts can be grouped on more aesthetic grounds. And though it won’t impress many crowds if you’re able to slip phrases like “French Ronde” or “Caslon-esque” into conversation, knowing fonts by their practical applications can help you choose the right ones for your projects.

  • Display fonts are big, beautiful and a bit unwieldy. Like a claymore sword, they look great hanging on the wall. Display fonts are destined for splashy ad headlines, website mastheads and anything requiring just a few words. If you set an entire document in a display font that has an old West, wood-cut, wanted poster aesthetic, your readers would probably gang up on you pretty fast.
  • Text fonts are your go-to fonts. Ones like Arial, Lucida, Georgia and pop culture darling Helvetica are all very readable at any size. This makes them ideal for setting long passages, articles, books and newspapers, where the design calls for multiple levels of headings and content.
  • Pixel fonts appear to be straight out of your favorite 8-bit arcade game. Their letters consist of tiny blocks or dots, making them ultra-readable at small sizes and low resolutions, which is perfect for mobile applications and tiny screens. They can also offer the convenience of being both readable and machine readable. Take that, bar codes!

Beyond the practical, fonts can be further classified by styles (script, stencil, weathered, etc.), decade, country, and even artistic movement (like Art Deco or Bauhaus). Of course, it isn’t all about good looks. Fonts fall into technical categories too.


Understand OpenType


letters image

If regular fonts are cars, OpenType fonts are time traveling DeLoreans. Car on the outside, remarkable effort and technology on the inside. So how do you take an OpenType font up to 88 mph? First, get up to speed on alternates.

Alternates are stylistic variations of characters that can be substituted for the default alphabet. While many fonts only offer a limited character set (26 letters, 10 numbers, and basic punctuation.), an OpenType font is more likely to have dozens, hundreds or even thousands of characters. Plus, advanced features that make automatic substitutions.

If you’re working with a script font, you might want to swap in characters that are ornamental or have repeated letters –- like a double-S –- replaced by a ligature (a character of two or more joined letters) that was specially made and therefore better looking. If you have enough variations of ‘I’ and ‘S’ for example, you could write a word like “Mississippi” with so many different characters, it would resemble custom hand-lettering.

As a general improvement over .ttf (TrueType format) files, OpenType fonts are a universal format; you can install an .otf file on both a Mac or PC, no problem. But just because you can install an OpenType font doesn’t mean you can make use of everything it offers. That depends largely on what design software you’re using the font in.

Imagine having the power to levitate chairs with your mind, but never using it. That’s akin to what you may be doing if you use an OpenType font in MS Word. Instead of the beautiful script you bought, you may see a mess of disjointed letters, because MS Word doesn’t support OpenType’s advanced features. In contrast, if you were using Adobe InDesign, the features would kick in and do some of the work for you.

Plus, you can always turn off autopilot and take control by picking and choosing alternates, ligatures and swashes yourself.


Discover the Glyph Palette


If you’re getting serious about working with fonts, discovering Adobe’s glyph palette is like finding a magical portal to Narnia in your wardrobe. Instead of talking fauns, you’ll find a useful, scrollable grid of every character in the font, which sometimes number in the thousands.

Overwhelming? No problem. A drop-down menu lets you filter the selection and view just ligatures, swash capitals, ornaments or number sets –- whatever the typeface designer has created and organized for you.

You can also select a letter or letters, and filter the glyph palette to display alternates for your selection. If the designer has included a half dozen different “E” variants, you can swap them in manually. Same goes for finding custom ligatures to replace “OO,” “LL,” “TH,” and the like. Some designers will go as far as including entire custom words designed as single glyphs.

Once you’ve spent some time exploring the glyph palette, you’ll know what to expect from future fonts.


Keep Learning, Keep Kerning


Typography is a lot like architecture. The surface aesthetics that everyone can enjoy are a result of an incredibly technical effort by its creators.

Though not all of us are cut out to hunker down and create a great font from scratch, using and power-using fonts is a very accessible creative arena, even for non-designers. You’ll know you’ve delved too deep when you interrupt dinner conversation to point out the ball terminals on the menu’s Bodoni-style serif.


More Design Resources from Mashable:


Top 5 Web Font Design Trends to Follow
The Future of Web Fonts
10 Beautiful Free Hand-Drawn Icon Sets
9 Free Resources for Learning Photoshop
20 Free Social Media Icon Sets For a More Shareable Website

More About: design, font, fonts, how to, opentype, typography, web fonts

For more Dev & Design coverage: