http://www.framerjs.com/
http://html.adobe.com/edge/animate/
http://facebook.github.io/origami/

HTML5 Weekly
Javascript Weekly
eDesign
Sidebar
Responsive Design Weekly
Web Design Weekly

Webdesigntut+

wanna delete.

https://layervault.com/

Head

• Always Avoid Title Case, Because Your Headings Aren’t Titles.
• The best way to emphasize a heading is by putting space above and below, because it’s both subtle and effective.
• You can make the point size bigger, but just a little. Use the smallest increment necessary to make a visible difference. If your text is set in 12 point, you needn’t go up to 14 or 15 point. Try a smaller increase—to 12.5 or 13 point.
• Only use two levels of indenting, even if you use more than two levels of headings.
• Suppress hyphenation in headings, and use the keep lines together and keep with next paragraph options to prevent headings from breaking awkwardly across pages.

Kerning

auto

The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.

optimizeSpeed

The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

optimizeLegibility

The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

Letter spacing

Always add 5–12% extra letterspacing to text in all caps or small caps, particularly at small sizes.

Lowercase letters don’t ordinarily need letterspacing.

Typographer Frederic Goudy is famously credited with opining that “Anyone who would letterspace lowercase would steal sheep.” But a few sources claim that his original comment concerned blackletter fonts, not lowercase, and that he used a more colorful verb than “steal.”

Color

in print

body text in print­ed doc­u­ments (e.g., motions, re­search memos, let­ters) must al­ways be set in black type. No exceptions.

on the web

But con­sid­er mak­ing body text on screen dark gray rather than black. Screens have more se­vere con­trast than pa­per, and thus are more tir­ing to read at full con­trast. This is be­cause screens pro­duce col­or by emit­ting light di­rect­ly, where­as pa­per pro­duces col­or by ab­sorb­ing and reflecting am­bi­ent light.

Pro designers sometimes unfairly malign gradient fills as a signifier of amateur design. As with any design tool, they can be used well—or poorly. In the physical world, most of the color we see is essentially a gradient, because any directional light creates a change in brightness. So with type, a background gradient that gently changes brightness can give a naturalistic sense of light and dimensionality.

Alternate figures

lining figures

These are the most common kind of figures, and the ones you’re most likely to find in the default position of a font. Lining refers to the fact that top and bottom of the figures “line up.” Lining figures can be used in any situation. Lining figures are always the preferred figures to use within all caps text, because they come closest to cap height.

Oldstyle figures

Unlike lining figures, oldstyle figures are designed to look more like lowercase letters. The ones in oncourse (shown below) are all one height. But often, some are short (0, 1, and 2), some descend below the baseline (3, 4, 5, 7, and 9), and some ascend (6 and 8). You won’t be surprised to hear that oldstyle figures work best in lowercase body text.

Still, I won’t say that they’re inherently better than lining figures for that purpose. As with justified text, you’ll see it done both ways in professional typography. And in context, oldstyle figures sometimes look a little, well, old. So the choice is yours.

With caps, however, you should not use oldstyle figures. They look wrong.

Tabular & proportional figures

Tabular figures are set on a fixed width, so that every figure occupies the same amount of horizontal space (somewhat like a monospaced font).

Proportional figures are not likewise uniform: the figures are set on varying widths that suit the shape of the figure.

In body text, proportional figures are preferred, because they tend to have more even spacing and a more consistent appearance. But tabular figures are essential for one purpose: vertically aligned columns, like you find in grids of numbers.

That said, the default figures on many fonts—especially system fonts—are tabular lining figures, so they can move easily from your word-processing document to your spreadsheet.

Ordinals

No superscripts

Superscripted ordinals are tiny and hard to read. So the best policy is to avoid them. To do this, you have to adjust your word processor’s default behavior.

Some fancy professional fonts include specially designed superscript alphabets and alternate figures that remain legible at small sizes. Those are fine to use in ordinals, but they’re typically made available as opentype features. So you’ll still want to turn off any automatic ordinal shrinking performed by your writing tool.

Web & e-mail addresses

Don’t hyphenate

For a more usable web address, use an address-shortening service