Make Your Small Type a Little Bit Bigger

There are plenty of good reasons for making your text type small as long as you don’t compromise the readability and resolution. That said, I’d like to suggest that you make your small type just a little bit bigger.

Small, readable type is not bad

Designers are known for their love affair with tiny type, and there’s no doubt about it, when viewing a design as a whole, small text type can look better on screen than big type.

It appears to look better because a block of type at small sizes becomes texture instead of individual words. We don’t have to read textures, we just visually soak them in. This is important because words are pictures, and if you can control the texture of the type while maintaining readability, you can use type to aid communication on many different levels. This is known as “typographic color” and is a very important part of any design project.

There are many things you can do to make small type more readable. Adjust the contrast, increase the leading (line-height), give it a bit more word spacing, etc..

Small type (a bit bigger) is better

There are 3 important reasons to make your text type just a little-bit bigger, readability, resolution, and hierarchy.

Readability

You might be able to read tiny type, but there are people who can’t. I recently corrected my nearsightedness with lasik surgery and find that I prefer having the type just a bit bigger. I’m getting all too tired of using CMD+ to make the fonts bigger in Firefox. Spare your readers that extra effort — I can’t recall a time I’ve intentionally made the type smaller.

Resolution

The smaller you make your type, the fewer pixels you are using to make up the details of each character. The smaller you make your type, the less it looks like the type designer intended it to look. There are pixel fonts that help out here a bit, but in any case, the bitmap versions of these fonts are trying to imitate the true nature of the character, and they just can’t do it with out more pixels.

The difference between 12 and 10 pixel type is not just 2 pixels, the difference in resolution is 34 total pixels which equates to a 38% difference. That’s right, 10px type has potentially 38% less resolution than 12px type. Sure you can still make out the words, but you’ve eliminated all the subtleties of hundreds of years of typographic design elements that were put there to make things easier to read.

Typographic Hierarchy

This is probably the most overlooked reason for making your type bigger. If you’ve carefully designed your content’s typography and you’ve made it as small as you can while retaining readability and resolution, you should still make it bigger.

When designing for the web, especially for dynamic content, make sure you leave room for the addition of type that may need to be a little bit smaller.

Annotations, captions, credits, and footnotes all require typographic distinction. You may not want a caption to be exactly the same size as your body copy, and differentiating with color and typeface at small sizes may not produce the desired effect.

If readability, and resolution aren’t enough to convince you, don’t deny yourself the flexibility of being able to go just a bit smaller and still retain the integrity of your design.

posted by john on Wednesday, Dec 13, 2006

Typesetting Tip #9: the Interrobang & the Snark

When using the basic question mark alone just doesn’t suffice, you can always throw one of these at the end of your sentence.

1. (‽) the interrobang (&8253;)
2. (.∼) the snark or sarcasm mark (.∼)

Basic Rules

When you need to add a little “umph” to a question, just end it with the interrobang&mdasha combination of the exclamation and question marks. The interrobang can also be substituted by using both the question mark and the exclamation mark. (!?)

The snark can be useful for signifying irony such as sarcasm.

Oh really?.~

posted by john on Monday, Nov 06, 2006

Typesetting Tip #8: The Middle Dot & Bullets

A brief description and usage rules for two typographic elements, the middle dot and the bullet.

1. (·) the middle dot (·)
2. (•) the bullet (•)

Basic Rules

The middle dot (·) or interpunct was used in ancient latin script before the usage of the space to represent word boundaries. The middle dot is also used in foreign languages (especially asian scripts) where word spacing is not used. While the character is not often used in English, it can be a useful typographic element. Try it as a divider in horizontal navigation instead of the vertical bar (|).

Bullets are used to introduce elements in a list. In most (if not all) cases, lists should follow HTML markup rules for unordered lists (<ul></ul>). The appearance of bullets should be stylized using CSS.

posted by john on Wednesday, Nov 01, 2006

Typesetting Tip #7: Fractions & Math

Fractions such as: ½, ¼, ¾, and other math symbols should all be displayed properly using the appropriate HTML entity. While there is not an HTML solution for typesetting every possible fraction or mathematical equation, there are basic entities that cover the most commonly used fractions and math symbols.

1. (½) one-half (&frac12;)
2. (¼) one-fourth (&frac14;)
3. (¾) three-fourths (&frac34;)
4. (⁄) fraction slash (&frasl;)
5. (×) times symbol (&times;)
6. (÷) divide symbol (&divide;)

Basic Rules

If you must create fractions you should use the fraction slash (⁄) instead of the typical forward slash on the keyboard. Fractions could also be created by using a combination of <sup> and <sub> tags with the fraction slash, although there may be issues with line-height (some browsers seem to add line-height when the superscript and subscript tags are used).

Example: ¹⁄₁₄ (does not display properly on IE).

When displaying dimensions (such as screen resolutions) or multiplication statments the times symbol should be used and not the letter X.

Example: Use (1024×768) not (1024X768)

posted by john on Monday, Oct 30, 2006 · 1 comment

Typesetting Tip #6: The Ellipsis

The ellipsis is is used to indicate deleted or missing text. It is not to be confused with 3 periods.

1. (…) the ellipsis (&hellip;)

Basic Rules

The ellipsis should be set using the HTML entity (&hellip;) and not substituted with three periods. If the ellipsis comes at the end of a sentence, it should be followed by the appropriate punctuation (….),(…,),(…?)and (…!).

The ellipsis (the 3 period version) is often used in email or chat to indicate that more text is to come. While useful and most often understood, this usage may not be appropriate in other applications.

posted by john on Thursday, Oct 26, 2006 · 0 comments