Posts Tagged ‘Typography’

We are pleased to present below all posts tagged with ‘Typography’.

The Ails Of Typographic Anti-Aliasing

As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we'll have to rely on software advances to fix these problems.

The Typographic Ails of Anti-Aliasing

Enter anti-aliasing: the next best thing to a world of higher-resolution monitors. The concept of anti-aliasing is fairly simple: add semi-transparent pixels along the edges of letterforms to smooth the appearance of the "stair-step" effect.

However, many factors and technologies determine the actual effectiveness of the process: hinting, subpixel rendering, software capabilities and operating system specifications, to name a few. Here, we'll look at what you as a designer can do to improve the results of anti-aliasing with Photoshop, Flash and CSS. Plus, we'll explain the constraints of hardware, browsers and operating systems.

Read more...

Rich Typography On The Web: Techniques and Tools

Let's face it: Web-safe fonts are very limiting. Maybe a dozen fonts are out there that are widely enough adopted to be considered "Web safe," and those ones aren't exactly spectacular for much other than body type. Sure, Georgia, Arial or Times New Roman work just fine for the bulk of the text on your website, but what if you want something different for, let's say, headings? Or pull quotes? What then?

You have a few options. Many people just opt for more elaborate CSS font stacks, with their preferred fonts up front. But that still leaves a big chunk of your visitors seeing the same old Web-safe fonts.

Typekit

Enter dynamic text replacement. In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don't use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.

Read more...

Guide to CSS Font Stacks: Techniques and Resources

CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font. But doing either of those things means you're missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site's typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

Screenshot

There are a huge variety of font stacks recommended. It seems every designer has their own favorites, what they consider to be the "ultimate" font stack. While there is no definitive font stack out there, there are a few things to keep in mind when using or creating your own stacks.

First of all, make sure you always include a generic font family at the end of your font stacks. This way, if for some strange reason the person visiting your site has virtually no fonts installed, at least they won't end up looking at everything in Courier New. Second, there's a basic formula to creating a good font stack: 'Preferred Font', 'Next best thing', 'Something common and sorta close', 'Similar Web-safe', and 'Generic'. There's nothing wrong with having more than one font for any of those, but try to keep your font stack reasonably short (six to ten fonts is a pretty good maximum number).

Read more...

Typographic Design Patterns and Best Practices

Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding... The list goes on and on.

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We've chosen popular newspapers, magazines and blogs as well as various typography-related websites.

Paragraph spacing size graph.

We've carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study that displays the websites' various values (for example, the ratio between the line height and line length).

Read more...

Beautiful Hand Drawn Typography

Beautiful and creative typography can come in a variety of different forms. Hand drawn typography can be an excellent source of inspiration for graphic designers and typography lovers. In this post we will feature 40 creations that use hand drawn type. Some have been created completely by hand. Others have been sketched and scanned into Photoshop or Illustrator. Another option is to use fonts that create a hand drawn effect.

Hand Drawn Typography

You may also be interested in:

Read more...

Beautiful New Free Fonts For Your Designs

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.

Screenshot

In this selection we’re glad to present you Calluna, Andika Basic, Mentone, Sovereign Regular, Medio, Tiresias Infopoint and many other high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.

Read more...

Lessons From Swiss Style Graphic Design

Also known as International Style, the Swiss Style does not simply describe a style of graphic design made in Switzerland. It became famous through the art of very talented Swiss graphic designers, but it emerged in Russia, Germany and Netherlands in the 1920’s. This style in art, architecture and culture became an ‘international’ style after 1950’s and it was produced by artists all around the globe. Despite that, people still refer to it as the Swiss Style or the Swiss Legacy.

Swiss Graphic Design - Archigraphia

This progressive, radical movement in graphic design is not concerned with the graphic design in Switzerland, but rather with the new style that had been proposed, attacked and defended in the 1920s in Switzerland. Keen attention to detail, precision, craft skills, system of education and technical training, a high standard of printing as well as a clear refined and inventive lettering and typoraphy laid out a foundation for a new movement that has been exported worldwide in 1960s to become an international style.

Read more...

↑ Back to top