Quantcast
Channel: The Blog of Brady J. Frey
Viewing all articles
Browse latest Browse all 117

Typography for the Web, a client overview

$
0
0

Often times we’re asked about unusual bugs that transfer from content typed at the office into our the beautiful content management system we designed for our clients. Those of you who are print content writers, and would like to break into web writing, this is a necessity to learn and understand the subtle differences between text in a print publication environment and text in a web environment, regarding a technical perspective. So, why is it that some characters come out so different between the two environments?

Microsoft Word is not a friend

While it’s common in the industry to type up your content quick and easy in Microsoft Word, it’ll come back to haunt you as write for the web. Since the late 90′s, as some of us know, Microsoft has lagged in the web arena – most prominent being their web browser, Internet Explorer. Where the hobble of development and support of standards has cost clients an enormous financial expense; Microsoft’s dated frontpage output of unprofessional and nauseating code is also a worldwide frustration for developers. Vocally, we ask you to avoid these in your everyday needs, but we understand that Microsoft Office applications are a necessary tool for major companies (though we recommend the free and excellent Open Office wherever we can) – however, they tool fall far behind in understand what exactly is the modern web, and how to work effectively to use it in your business.

Most notable to our clients, is it’s lack of using valid web character entities. So what are character entities?

Logical, Mathematical, and other symbols

The web is still in it’s infancy, but to manage unique languages across quick, and invisible, barriers—guidelines had to be made to balance various characters needed to communicate with worldwide languages, and to communicate with computers.

As a default, we support http://www.unicode.org/, coded in all our clients pages, that references UTF-8. In short, this means we support the largest amount of special characters possible for Latin languages, and science languages.

To write these special characters and display them through a browser, you type them in code:
http://www.digitalmediaminute.com/reference/entity/
For example:
Ó Should produce an Ó

Most of this won’t be a huge concern for our clients— our content management systems attempt to read your print typed characters and translate them before it’s published to the web… but for the occasional Latin accent, soft returns, mathematical symbols, glyphs, and smart quotes, you’ll have a problem. As I do with almost every word document professionals send me.

So what do you do?

First off, it’s recommended to avoid building your web content in Microsoft word—using a program such as text editor (so long as you save as simple text, .txt, not rich text, .rtf), a web based editor (text wrangler or BBEdit from Bare Bones on the mac, for example) or our web based administration application provided by us or your developer of choice is always preferred. By default, Microsoft word does two things:

  1. Much like all print layout applications, it turns regular straight quotes, ” and ’, into smart quotes ” and ’ without your intervention. This is desired in print, but not for web—certain browsers will only post a question mark—, an unusual box, or nothing at all
  2. It adds unneeded space between characters and makes soft returns for reasons we can’t imagine—these also will show the noticeable and annoying question mark.

When these show up on websites, the industry term (I’m serious), is called ‘Gremlins’. You have gremlins in your text. Aside from avoiding bright light and water, not using MS Word is a good step to avoid gremlins in your text.

Double spaces for print and web

Arguably the definitive guide for typography, The Elements of Typographic Style
by Robert Bringhurst:
http://www.amazon.com/exec/obidos/ASIN/0881792063/clagnut-20/104-9605534-0735156

Can help you in your print and web content by pointing out specific guidelines to follow—it will help your clients read your content more efficiently, and more accurately.

One thing to point out is the use of double spaces after sentences, a scorn in print and web design—Robert Bringhurst knows best:

In the nineteenth century, which was a dark and inflationary age in typography and type design, many compositors were encouraged to stuff extra space between sentences. Generations of twentieth century typists were then taught to do the same, by hitting the spacebar twice after every period [full stop]. Your typing as well as your typesetting will benefit from unlearning this quaint Victorian habit. As a general rule, no more than a single space is required after a period, colon or any other mark of punctuation.

The mechanical typewriters of old did not understand kerning (the spacing between letters) and it was a necessity to double space after small punctuation to account for it’s mechanical weakness. This is not the case for modern software and modern computers, and by default, the web offsets this human trait in translating multiple spaces into a single space. If you actually need two spaces, it is recommended to use a space character entity to add multiple spaces in your content.

However, for print design, of course, your programs will not compensate for that, and it would do you justice to avoid the practice.

After thoughts…

MS Office programs are not the only culprit in writing for the web; for the most part, any print orientated application will fail under the needs of web typography (Quark and InDesign for example). We specifically target this application mostly because it’s the #1 writing app for businesses (professional writers excluded), and for the most part, parades a mistaken air of web readiness. We invite our clients to use the programs that best fit their productivity with the hope that this little bit of information helps increase that productivity.


Viewing all articles
Browse latest Browse all 117

Trending Articles