digital photo: All about Typography in Webdesigning and Tricks to use Them Effectively....

Web typography is the most undervalued and misunderstood aspect of web design. There are many reasons for this, probably, the most common factor is it is ignored purely for simplicity.
Why over complicate something that works fine as it is? Web typography is all theories and opinions, that is the point. The evolution of web design relies on opinions and theories, otherwise we would be stuck with the repulsive web designs we had 10 years. So, yes, web typography is very important and you cannot afford to ignore it any more.
In this post we have collected great reources to help you understand and implement successfully web typography on your web pages. You will find tutorials, tips, guides, best practices, tools and inspirational showcases. However important highly you grade web typography, every designer should take something from this post, and I will start you off by urgeing you to read this article: Web Design is 95% Typography.

CSS Typography Tutorials

Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
View Demo

Typographic Contrast and Flow – Emphasizing Text

As you have probably know, most online readers don’t read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader’s attention to the important messages.

Better CSS Font Stacks

Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience.

How To Use Any Font You Wish With FLIR

In this tutorial you will be shown how to implement Facelift Image Replacement (or FLIR), an alternative to sIFR that does not require Flash.
View Demo

CSS Gradient Text Effect

Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property.
View Demo

Snazzy Pullquotes for Your Blog

Pullquotes are quite possibly the single most effective element that can be added to text to improve its scannability. After all, the publishing pros in the magazine industry have used them for years, both as a design element and as a courtesy to readers. In this tutorial, the author, shows you two different methods of creating pullquotes for your blog. Odds are good that you’ll be amazed how easy it is to get them up and running.

Setting Web type to a Baseline Grid

This article covers the basics of baseline grids—defined grid areas within which content is placed—and how they can be applied effectively to the web medium. In print, baseline grids are almost mandatory. They ensure the bottom of each line of text—its baseline—aligns with a vertical grid, akin to writing on a ruled piece of paper. This advantage isn’t relevant for Web design, but the other major advantage—maintaining a vertical rhythm—is.

Swooshy Curly Quotes Without Images

Curly quotes aren’t like traditional characters. Like full stops, commas and hashes they float within the character space and leave lots of dead white space, making it bloody difficult to manipulate them with CSS. Styles generally fit around text, so cutting into that character is tricky indeed.

Compose to a Vertical Rhythm

On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must be calculated with care in order that the rhythm is maintained.
View Demo

Advanced Typography Techniques using CSS

While the descriptions and basic uses for CSS typography controls have been beaten to death, there are still many rich typographic abilities of CSS that are not well documented. In this post, the author, demonstartes many underused CSS typography tecniques, typewriter text, hand writing and reflections are just some of the tecniques shown.

Snook’s Resizable Underlines

The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself. Whilst this can be achieved with background images, this will be useless when the user resizes the text, as the text will break out of the lines and look a mess.
View Demo

CSS Font-Sizing: a Definitive Guide

Font sizing in CSS sounds as though it should be easy. Until you try it. Many developers use the force; they tinker with the font-size property until it looks right only to find it’s different in another browser.

Six Ways to Style Blockquotes

Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.
View Demos

How to use headings in HTML

Headings are elements that describe the content that follows and also define a document’s structure. Similar to large headings and subheadings in printed newspapers, html headings should briefly describe what the page or sections are about, making it clear to the reader (human or non-human) what to expect if he continues to read.
We have <h1> to <h6> heading tags. The numbers in the tag name carry a certain “weight”, where <h1> is the “heaviest” and <h6> is the “lightest”.

10 Examples of CSS Typography and how they did it…

You can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites.

12 Examples of Paragraph Typography

Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing the right paragraph style is one of the cornerstones of good typography. In any project, the text itself will have its own tone, rhythm and meaning. It’s our job to provide it with a stage on which to sing. In this great article, Jon Tangerine, describes in detail 12 examples of paragraph typography.

beautiful fonts with @font-face

Using @font-face for font linking is relatively straightforward. Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

jMetronome: Using jQuery to Keep Typographic Rhythm

One issue that many people face with the vertical rhythm technique, is that it can easily be thrown off by non-text elements, such as images. One solution to this issue is to make sure your images always have a height that is a multiple of the line height being used by your document. Unfortunately, this is usually not practical for production sites. In this post the author solves this problem with the always reliable jQuery.
View Demo

Typography Best Practices

8 Simple Ways to Improve Typography In Your Designs

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect. Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.

6 Ways To Improve Your Web Typography

Many designers and developers often equate typography with choosing a font or typeface, while others simply forget that 95% of web design is typography and tend to forget about it. Clearly, if typography is really 95% of web design, it should be at the forefront of the mind of every designer and developer. Here are Six Ways To Improve Your Web Typography.

A Guide to Web Typography

First, it’s worth noting that Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained monkeys were able to correctly identify Helvetica 90% of the time.

Better Web Typography

The world of print design still hasn’t made a substantial impression on the web. Sure, a few things are nicked now and again, but most web designers remain blissfully unaware of what their QuarkXPress- or InDesign-loving pals are up to. Mostly, that’s fine, but there are occasions when web designers should turn to print specialists for their know-how, and one of these occasions is the use of type.

The Elements of Typographic Style Applied to the Web – a Practical Guide

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

CSS Type Apps and Tools

CSS Type Set

Font Tester – CSS Font Comparison Tool

Fontdeck

Typetester – Compare Fonts for the Screen

Typechart – Browse Web Type, Grab CSS

STC :: fontBROWSER ::

HTML-Ipsum

PX to EM Conversion Made Simple

Em Calculator

CSSTXT – Create a Style to Your Text

CSS Font and Text Style Wizard

Flipping Typical

Code Style – Font Stack Builder

Web Safe Fonts and PX – EM Coversion

PX – EM – % – PT – Keyword

16 Gorgeous Web Safe Fonts To Use With CSS

Common Fonts to all Versions of Windows & Mac Equivalents (Browser Safe Fonts)

The Anatomy of Web Fonts [Design Principles]

CSS Typography Reference Sheet

Embedding Fonts

TypeSelect – Javascript-based Selectable Typefaces

TypeSelect works by leveraging typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text, Type Select is able to combine custom fonts with your browser’s native text selection funcationality. With TypeSelect you are able to interact with beautifully rendered typefaces just like you do with normal text.
View Demo

FontJazz – Embed fonts on web pages

FontJazz does not take the usual road, where an image is generated on the server-side, for every headline. Instead, FontJazz implements a simple type-rendering engine in JavaScript, which means that any headline is rendered 100% client-side, without any kind of server-side dependencies or bandwidth overhead.

Facelift Image Replacement

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements.
View Demo

sIFR 2: The Healthy Alternative to Browser Text

Scalable Inman Flash Replacement (sIFR) is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. sIFR requires JavaScript to be enabled and the Flash plugin installed in the reading browser. If either condition is not met, the reader’s browser will automatically display traditional CSS based styling instead of the sIFR rendering.

Font Burner

Websites are basically limited to the default fonts that come with all computers. That’s because a user must have the fonts installed on their computer in order to have it show up in their browser. Font Burner bypasses this by adding a simple block of code to your webpages and instructing the browser to use a specified font from the Font Burner repository.