You are currently browsing the category archive for the ‘Typography’ category.

WordPress Logo

Fonts are a very important part of web design. There are different ways web designers can use fonts to unleash the greatness of their web design. They can either use images, which has always been the case used for a long time now, but another way is through the use of the new embedded font technology. We have sIFR and FLIR which offer better advantages than using images; they can be detected by search engines and load faster.

1. All in One Cufon

2. Font Burner Control Panel

3. Typekit Fonts for WordPress

4. TextImage

5. WP-Cufon

6. FLIR, Facelift Image Replacement

7. WP sIFR

Source: 7 Really Great WordPress Plugins For Fonts

Looking for some Lorem Ipsum or Random Text to kick your web design going? Well here we have compiled a list of 8 Lorem Ipsum and Random Text generators for your use. These text generators are handy when you want to insert text into web design or development project to get things going.

You don’t have to waste time trying to thing of something to write for sample text, all you need is generate the text you want and you are good to go.

1. Lorem Ipsum Generator

2. adhesiontext

3. HTML-Ipsum

4. Lipsum Generator

5. Text Generator

6. Blind Text Generator

7. Dummy Text Generator

8. Random Text Generator

Source: 8 Lorem Ipsum And Random Text Generators

From this article:

bad Squishy iPad typography example

Example of Screwed up Columns on iPad

iPad Need page Breaks example

iPad Big Spaces / Gaps errors example image

April 7, 2010 1:31 PM

Jon H said…

“Yes, as far as I can tell, page breaks are not supported on iBooks at all.”

But only because of a flaw in the ePub standard. Not so much because of iBooks.

April 8, 2010 8:17 PM

Liz Castro said…

@Jon, Hmm. I don’t know what you mean. I’ve gotten CSS page breaks to work just fine in an ePub in Adobe Digital Editions.

April 8, 2010 10:07 PM

Michael W. Perry said…

Welcome to the bleeding edge of technology: A muddle of competing proprietary formats by competitors and an open standard, ePub, that’s woefully inadequate for anything other than ugly novels. I’d hope Apple and the iPad would bring sanity and good taste to this mess, but there’s no indication thus far that they even understand the problems, much less have a handle on the solutions. Steve Jobs seems to have abandoned art for geekery, hence iBooks ugly full justification.

It should be possible to make ebooks look as classy as print books. That we can’t do. It should be possible to do that at least as easily as creating a good-looking print book in InDesign. Again, not possible. If something can be done at all, it takes CSS tweaks by geeks and still looks gosh-awful.

Perhaps we need to educate readers so demand better quality rather than just $9.95 or less bestsellers. When that happens, the industry (including Apple) will follow.

April 9, 2010 12:17 PM

Peter Hinman said…

Is ePub incapable of handling symbols and formulas? I’m a mathematician, and converting PDF’s with math in it to ePub doesn’t work at all (via Epub2go or calibre). But there is a lot of talk about using the iPad as a reader for texts, presumably including math and science. Do the books have to be formatted specially for ePub or how does it work?

April 9, 2010 8:22 PM

Liz Castro said…

@Michael: I think that people do care about book layout. Once there are decent options, I think people will choose them. I’m working on it. (And ePub and iPad do allow right ragged.)

@Peter: Mathematical formulas are number 9 on the IDPF’s list. I’d love to see an example of what sort of thing you’d like to see.

April 9, 2010 8:57 PM

News | Stephen Coles | April 8, 2010

I’m not an iPad naysayer. I forked over $700 on the first day of pre-ordering and my iPad hasn’t left my side, day or night, since it arrived on Monday. I’m with those who see the device and its new approach to computing as an exciting step forward, especially for media delivery. The possibilities for reviving the magazine and newspaper industries are exciting and real.

Yet it’s exactly that part of media consumption, reading, that reveals what’s missing on the iPad: good typography.

Signs that type took a backseat in the iPad’s development were clear back in January when Steve Jobs demoed the device, revealing just four uninspired and uninformed font options in iBooks. Apple also went with full justification without hyphenation, learning nothing from the Kindle’s spacing woes. These decisions were small or unnoticeable to the millions of future iPad buyers watching the announcement. But they stuck out like a sore thumb to typographers, whose job it is to make small, unnoticeable decisions that make text easier and more enjoyable to read. For those of us who hoped that a device meant for reading would be designed for reading, with all the typographic details well-considered and implemented, the announcement was disappointing.

Disappointing, but not surprising. Apple has made some puzzling decisions over the last few years that leave one wondering if they really care about typography as much as they did in the 1980s when the Mac launched the desktop publishing revolution. As recently as 2005, Steve Jobs made typography a central theme of his commencement address to Stanford grads, but his actions as the almighty head of Apple haven’t followed suit.

Lucida GrandeThe string of odd missteps began with the release of Mac OS X. Amid a bunch bundled fonts, most of which are not worth mentioning, the system came with Lucida Grande, an excellent screen-optimized version of Kris Holmes’ Lucida Sans. The clean, readable face, contemporary but fairly neutral, was used throughout the OS X interface and embraced by web designers (along with its Windows equivalent Lucida Sans Unicode) as their go-to family for small text. Yet, to this day, there is no Lucida Grande italic. I can’t explain why, and neither has anyone at Apple. This is the short and simple reason why sites like Facebook don’t use italic. If you design with Lucida your options for emphasis and hierarchy are limited to size and weight. Meanwhile, Microsoft — the company that traditionally eats Apple’s dust in design — worked with some of the world’s best type designers to develop the ClearType fonts, six complete families designed specifically for the screen.

A lack of Lucida italic could be considered a mild irritant, but Apple’s typographic neglect in OS X ran deeper. The system came with a font manager that was, until recently, the least reliable software bundled with a Mac. Even now it has has a reputation that contradicts Apple’s high customer satisfaction. Tweets about “Font Book” are often accompanied with the words “sucks” and “hate”.

Then came the iPhone, its fantastic display with a high pixel-density enabled legible type at small sizes. But Apple essentially erased that potential by choosing Helvetica as the iPhone’s system font. Sure, Helvetica is a graphic designer’s favorite, but its closed forms and tight spacing hinder reading, especially when small. It was a classic style-over-substance decision. The even more egregious spit in the face of readability was forcing Marker Felt users of the Notes app. More often than not, Apple’s recent decisions about type either ignore its importance or value form over function.

The iPad represents a new opportunity to reverse this trend. A device designed for media consumption could validate Apple’s dedication to design by emphasizing design’s most basic element: typography. But so far, it flops. Here’s what’s missing:

Typography on iPad

1. Missing in iBooks: Ragged Right Alignment and Hyphenation
This is Typography 101. You don’t need to be a full-time glyph geek to know what full justification without hyphenation does to spacing and readability. Of course, resizable text can’t benefit from all the careful spacing and line break adjustments traditionally made by a book designer, but the least an automated system can do is prevent wordspace rivers wide enough to sail a tanker through. This was one of the more obvious ways in which Apple could have one-upped the Kindle and they dropped the ball.

2. Missing in iBooks: Orphan/Widow Prevention, Proper Handling of Tables and Line Breaks
Liz Castro is documenting how iBooks potentially mangles tables, ignores page breaks, and mishandles text wrapping around images. It’s possible that some of these issues can be addressed by the ePub author, but it sounds like iBooks could be more intelligent with documents that weren’t designed to display in such a narrow column widths.

3. Missing in iBooks: “Embeddable” Fonts
ePub supports downloadable OpenType and TrueType fonts via @font-face, but the iBooks app does not. As one commenter rightly condemns:

The lack of support for embedded fonts is a catastrophic failure. It’s a massive black mark against Apple for anyone who’s interested in seeing publishers improve the standard of ePubs.

4. Missing in iBooks: Font Options that Work for Books
Typography on the iPadIf you’re not going to let the publisher/book designer select the book’s typeface — and Sam Wieck explains why that alone is wrought with problems — the user’s options better be good. Unfortunately Apple offers just five: Baskerville (Monotype), Cochin, Palatino, Times New Roman, and Verdana. Of these, I’d say Palatino is the only legitimate choice for reading a book on a screen. Some cuts of Baskerville work well in print, but its weight is far too uneven for text in pixels. Cochin reeks of a decision made by someone gawking at pretty letters rather than diving into pages of text. The web learned long ago that Times New Roman doesn’t work for text type on-screen. And Verdana? Maybe for an IKEA catalog…

What would I offer instead? Minion, FF Scala, Dante, Garamond have all proven themselves in print. And the more sturdy of these alternative typefaces for book design would perform better than Apple’s selection.

This is only conjecture, but it feels like Apple decided to save some cash on font licensing by relying on the same old Linotype fonts they’ve bundled with their machines for years. If that’s the case, why not go with Hoefler Text which is already installed on the iPad? And the strangest omission of them all: Georgia, the father of all screen serifs and far better than any of the iBooks options.

Unlike Apple, Amazon clearly did their research here. PMN Caecilia isn’t well known outside the typorati, but it’s one of the more readable typefaces ever designed and its low stroke contrast and slab serifs serve the Kindle very well.

Typography on iPad

5. Missing in iPhone/iPad OS: a Legible, Flexible UI Font
Helvetica wasn’t a failure on the iPhone because the display’s high pixel density kept the letterforms clear. But the PPI on the iPad is significantly lower. I haven’t seen much that borders on illegibility, but relying on Helv limits the range of font sizes an app developer can use. Go below 12px and things get muddy (the numbers at the bottom of this Calendar view, for example). Our friend Lucida, on the other hand, which shines at small sizes, isn’t included on the iPad.

6. Missing in Pages: Accessible Text Options
Typography on iPadI’m impressed with how easy it is to make a nice looking document in Pages. But you better like its templates and default styles, because customizing the type is a bit of a chore. Font selection is buried behind a few taps and a scroll, and changing the font size requires a tedious tap for each single point up or down. It’s all surprisingly un-Mac-like.

7. Missing in Mobile Safari: True @font-face Support
Contrary to some reports, the iPad does support CSS font linking via @font-face, but it’s limited to SVG. There are many reasons why SVG isn’t a legitimate font format — stability and selectability, for example — but the most important is that a majority of font makers have already settled on WOFF or services like Typekit as their format of choice. This blasts developers back to those dark ages (a few months ago) when there were very few professional fonts available for embedding. Typekit is working on a solution, but its not ready for prime time.

So, webfonts are out. Fortunately there’s a much longer list of fonts installed on the iPad compared to the iPhone/iPod Touch, but very few of them are very interesting or practical for modern web and app design.

Typography on iPad

8. Missing in Notes: Font Options
The Notes app on the iPad is still stuck in silly Marker Felt land!

We can only hope and pray to Lord Jobs that today’s iPhone OS 4.0 event will address some of these gaping holes. With so many manufacturers, publishers, designers, and developers following Apple’s lead, the state of typography in a world of digital media may depend on it.


Tags: , , , , ,

Web Design is 95% Typography

By Information Architects Japan

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Information design is typography Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites:

Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.

With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designer’s task “to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him”.

Macro-typography (overall text-structure) in contrast to micro typography (detailed aspects of type and spacing) covers many aspects of what we nowadays call “information design”. So to speak, information designers nowadays do the job that typographers did 30 years ago:

Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose.

Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic?

Too few fonts? Resolution too low? The main—usually whiny—argument against typographical discipline online is that there are only few fonts available. The second argument is that the screen resolution is too low, which makes it hard to read pixelated or anti-aliased fonts in the first place.

The argument that we do not have enough fonts at our disposition is as good as irrelevant: During the Italian renaissance the typographer had one font to work with, and yet this period produced some of the most beautiful typographical work:

Read full article here: Web Design is 95% Typography

Periodic Table of Typefaces image


The Grid System for Design and Layout


The user needs to be able to scan, read and understand a page quickly


Use a grid system for the placement and alignment of all visual objects on the web page.


Image from : a comprehensive Grid system resource


Use when

You are designing a conventional website that needs to follow the normal visual design standards. This pattern does not necessary apply to artistic web sites where the goal is to display an explicit non-standard style. The human eye ‘sees’ a web page a certain way, roughly from the top left to the bottom right, and the eye can be guided to see elements in a pleasing and distinctive way.

Grid Used on Audio Auto Ad

Image from



A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.

A grid is a consistent system for placing objects. It works on two levels:

  1. At the unit level of cells (e.g. 20×20 pixels) See for example the Audi example above where a strict underlying grid is used for all elements on the page. In print design such grids are called ‘modular’ grids
  2. At the column level (e.g. 4 columns) See for example the Abn-amro example below where a grid is used for defining the overall layout in terms of columns and margins. In print design such grids are called ‘column’ grids

In literature for print design, there are many variations of grids described but most are based on modular and column grids. Often you’ll encounter a mix of both types of grids.

A grid is an aid for the designer, not a goal by itself. It is therefor ok when some elements are deliberately NOT placed on a grid to create a certain effect. The grid simply creates some rhythm and guidance for the eye.


The grid creates a systematic and consistent rule for placing objects. It creates a visual rhythm. It makes it easier and more pleasant for the eye to scan the objects on the page. Page designs that do not use a grid often tend to look ‘messy’ or ‘unprofessional’.

More Examples



In this example (above) from the Abn-Amro shop you can see a different type of grid being used. Not a strict modular grid, but a grid defining some columns, margins and horizontal evenly spaced guides.


From more information on different types of grid systems and when to break the grid system, see the book ” Making and Breaking the Grid” by Timothy Samara.


%d bloggers like this: