Ever wanted true typography on your website, in your emails, on social sites, and in documents?

The idea is to code this without making the words a frozen image, so that they remain selectable and copyable as text.

(image: THREESQUAREdesign)

Well, you're not gonna get it, at least not with where the web is at right now. You can get true typographic and font control in a sophisticated page layout program, and create PDFs that preserve most of it, but that's a niche need compared to viewing actual pages right in the browser. Everybody hates PDFs, even though they're great for some things.

Happily, some new font technologies (standards, really) are being proposed for inclusion in HTML5 or CSS3 (more likely) but as usual Microsoft, Apple, Adobe, and Google can't seem to agree on the details. In essence there's a proposal for "web fonts" which would allow designers to use any font they have on their machine and have it actually appear that way on every other machine, including the poor slobs who don't happen to own that (outrageously expensive) typeface. Currently, the browser substitutes a font which is installed on the viewer's machine, with quite unpredictable results. So unless we want browsers to use the same handful of boring fonts forever, we need the ability embed fonts in a viewable-only manner.

The obvious hurdles are: How to make it read-only so people don't somehow retrieve the entire typeface for free (that part's actually quite easy); Whose fonts to include? (There are many type foundries and not all of them like the idea, since they make money selling pricey fonts to designers); And lastly, the always fun "who decides on the actual spec and implementation?" Some want limited font embedding to keep page sizes small and fast-loading. Others want the full range of varities, ligatures, alternate character sets, unusual punctuation, wingdings, and so on - what you would get in a program like InDesign or Quark XPress, essentially.

Beyond just embedding fonts, would new positionally fixed-vs-floating options be included, allowing for more design control over the look of the page? Or would we be limited to the way HTML/CSS currently parses text and offers only rudimentary control over placement, and none over kerning, leading, orientation, fitting a path, and so many other factors that are essential to the print industry but just don't exist in 'electronic print' yet.

However, with the growing number of people reading newspapers, books, and magazines off their iPads and Kindles and with more such devices sure to hit the market, how long can the digital publishing world afford to lag so egregiously behind the print market? Not for long, if they want people to take eBooks (in all forms) seriously as a print-replacement. Now, I love the weight and reality of a good book in my hands. But I can see the value or reading a newspaper or magazine on a slate device - these have a limited shelf-life anyway, and used up and absolute enormous about of paper pulp in their creation. But I wouldn't want to read, say, a fashion or art magazine - where style is part of the substance, on an electronic device unless it looked just as good as the print version. Obviously this means color has to make its debut, but the whole infrastructure for "pixel-perfect grid design" that is the status quo in the print world needs to be grafted or drafted into existing electronic standards to make that a reality. Otherwise, people may read novels or browse websites where there is news, and lots of other fun things, but they will not equal or surpass the look and feel of "real" printed pages. The internet, even in it's so-called 2.0 edition (more interactive design and apps living in clouds, whee!) is still in its infancy when it comes to sophisticated typography, graphic design, and page layout incorporating photos, illustrations, text, and yes even advertisements in a sophisticated, vibrant, "non-web restricted" way.

Newspapers like The New York Times, The Wall Street Journal, and countless others are doing their best at the moment to make their sites look like their printed versions. But it's important to understand this is clever mimicry, not parity of technology. Magazines like Spin, GQ, Rolling Stone, InStyle, and any other which relies heavily on creative visual design to attract and keep their audiences, are faring much worse: Their websites don't even attempt to match their print products. Obviously, something needs to be done.

However, until it is, I'm going to at least give you a list of typographic characters that recent generations have largely forgotten about. Remember how there are two different sets of quote marks, one for the left and one for the right of the phrase in quotations, and how they are curved differently and have different serifs? Remember how a comma and an apostrophe are both curved, not short vertical lines? Remember how there are hypens and dashes, which have totally different purposes, and how dashes themselves are split into widths (en dash, em dash)? What about a true ellipsis, which is not three periods in a row but is much less wide than that and is actually a single character?

Well, in a small attempt to get those who care (including myself) to start using the typographic options which ARE currently available but just rarely used due to the lack of them being printed on keyboard buttons (and who actually uses Ctl+XXXX or Character Map/Key Caps to insert any special characters?), here is a list of oft-needed but rarely actually used characters which are elegant and purposeful, but have largely given way to ugly computer-geek, initially 8-bit ASCII-limited stand ins for the real thing.

Hopefully a much more comprehensive treatment of typography and page design in general will come to fruition before we all die. In the meantime, here are some useful "glyphs" you can use in your own web work that will give it just that bit of sophistication less particular designers lack. Feel free to copy and paste from this page, or better yet, copy and paste just the bottom part and paste it into a local HTM file, a Wordpad (RTF) document, or some kind of easy to open document that still preserves the characters integrity (Notepad won't, unfortunately; I dunno about Mac's basic text editor). I shudder to think at using a Word document, but I suppose if you kept it open all the time, you could escape the horrific loading times of MS Office (or any office suite). Lastly, looking up "typography" on Wikipedia will give you a list of these and more. I just find it handy to have a local document rather having to open a tab and go to Wiki all the time, but it's a matter of personal taste. For what it's worth, I use a free "Notepad replacement" app made by a guy in his space time, which remains as simple as notepad and outputs true plain text (.txt), which I love, but it is smarter than Notepad about extended character sets and Unicode.

Keep in mind also that not every typeface supports every one of these characters. I've chosen a typeface that does, but be sure (obviously) to test them out in your font of choice or else you'll end up with the dreaded gobbledygook when the browser doesn't know what the hell to display. Some glyphs, like registered trademark symbols, also look better in some fonts than others. You get the idea.

Without further ado, here's the list I keep handy and try to use as often as I think of it. And come to think of it, someone should develop a text editor for producing clean HTML which automatically swaps these "real" glyphs in for their faux keyboard equivalent (like Word's "smart quote" feature). Maybe someone already has. Maybe it's in HomeSite or Dreamweaver's latest edition, or in some obscure shareware program. Anyone know? It seems like a killer app for a small set of people; namely designers and perfectionists. Maybe I could code something like that with my stepdad's help...

---

Handy Characters You Will Not (Easily) Find On Your Keyboard.

– en dash

— em dash

’ true apostrophe

‘ true open quote (single)

’ true close quote (single)

“ true open quote (double)

” true close quote (double)

... true ellipsis

« open guillemet

» close guillemet

¿ inverted question mark

¡ inverted exclamation mark

· interpunct

• bullet

° degree

? prime

© copyright symbol

™ trademark symbol

® registered trademark

£ british pound sign

€ euro sign

¥ japanese yen sign

¢ american cent sign

§ section sign

¶ pilcrow

| vertical bar

† dagger

‡ double dagger

This is just my handy cheat-sheet. If you regularly type in languages which involve characters with accents, circumflexes, or umlauts, not to mention the kinds of special torture Scandinavians and Poles subject their letters to, and you don't possess a keyboard designed to type those characters easily, why not add them to this list? It looks much nicer than leaving them out altogether.

For example, it's much cooler, and more accurate, to write Björk Guðmundsdóttir when talking about the Icelandic singer than it is to wrote Bjork Gudmundsdottir. The former is her true name; the latter is an approximation of it.

I try to preserve foreign characters (foreign to English-speakers) whenever possible, though I know I slip a lot. I am trying to fight for a future where such fidelity to true words and names is much easier to attain than it is now. Hopefully our children or grandchildren (or us in our lifetimes, think of that!) will see a revolution in font embedding, Unicode evolution, typographic controls, and many other page design acrobatics that we see in print all the time (see above photo). Only then will the web be capable of displaying something as beautiful and hand-crafted as the written page.

Though, you'll still find me holed up somewhere, smelling the newly cut edges of some hardcover book, savoring the texture and thickness of the paper, and feeling that comfort of a genuine printed tome in my hands. We may be among the last generations to know or appreciate what the real thing is like. A physical book is like a tree: you can make a perfect replica of it in a digital space, but the book and the tree are so much more than just the sum of their parts. Ok, enough from this crazed bibliophile. I may launch into Zen Calligraphy if I go on, and if you've made it this far, that would surely be the final blow.

Sound off!