NochNoch.com

Recently, I was approached to do a redesign of NochNoch.com. The site is a self-help, personal development blog written by a woman named Enoch Li.

Unlike other similar self-help blogs, Enoch doesn’t write “how-to” advice. Her content reads more like a personal letter, or journal entry, describing her experiences and what she’s learned. It was this aspect of her site that I decided the new design should showcase.

It sounds like a no-brainer, but the more experience I gain as a designer, the more I realize how important content-focused design is. It’s easy to fill a page with decorations and graphics and make it “pop.” It’s much harder to cut down the distractions and fluff and really build the site from the content out.

I wanted NochNoch.com to embody that feeling of a personal letter. I wanted readers to enjoy handcrafted text that was set beautifully following typographic principles. Read the page “My Story" for the perfect example of what I was trying to capture. And hopefully did.

Trying to embody a handwritten letter or journal entry is great but this is the web, not a piece of paper. NochNoch.com has readers all over the world reading in multiple languages and on multiple devices.

Prior to the redesign, Enoch was maintaining separate sites for Chinese and English, each with its own mobile version being served to small-screen users. The new design integrates this all into one. Traditional Chinese and English are now on one site and the appropriate language is automatically served based on a user’s computer settings (with the option to change by clicking a button in the footer).

Furthermore, the mobile versions have been abandoned in favor of a fully responsive design. Try resizing the browser window and you’ll experience the site shrink, the font size adjust, and eventually the columns rearrange. This adaptive design is an elegant solution that allows every user to have a similiar experience whether they’re on a big desktop monitor or tiny iPhone screen.

And the experience is really what is important here. From the carefully set text, to the colors, to the soft transitions when you hover over links, every design decision was made to capture and sustain the personality of the site.

It’s for these reasons that this has been one of my favorite blog redesigns thus far. It was great working with Enoch. I’m grateful that she allowed me to experiment and the push the boundaries rather than settling for a “typical blog design.”

I think it paid off.

asker

Anonymous asked: Question: Are you a one- or two-space after the period kinda guy? I've always been a two-fer but only because that's what habit they forced on me as a kid. Now I'm hearing and agreeing with arguments for the one-er, but its a tough habit to break. Thoughts?

Here’s a two part nerdy explanation, just because I love talking about this sort of thing.

Semantic Argument

Spacing between words or sentences or paragraphs or whatever is a presentational decision. It should be kept separate from content.

When you’re typing and you hit the spacebar, you’re adding in some content. A space counts as content. The size of that space, though, is a design decision. Just like the size of a letter is a design decision. By entering two spaces, you’re actually adding more content with the aim of changing the presentation.

Obviously, this single instance isn’t that big of a deal. But the issue of separation of content and style is a big one on the web (and digital communication) and it’s a good habit to foster.

Even in something like Word, it’s better to rely on its styling presets, rather than add content to your text to try to adjust the look.

For example, changing the setting to increase the size between lines is far more preferable than manually adding a hard return at the end of every line. Why? Because the hard return becomes part of the content. This makes it a bitch to change it in the future. If you want the presentation to be different, you end up having to go in and edit out a bunch of content. It makes the content less transferable too. Who knows how it’ll look when you paste it into an email?

The same goes for spacing between letters, words, and sentences. Leave the style decisions separate from the content. Let a designer make them, or choose from software presets, or rely on the spacing defaults included in digital fonts. Don’t muck up your beautifully written content.

Typographic Argument

From a typographic standpoint, extra space after a full stop is usually disruptive to the flow of text. A lot of the readability of text relies on consistent rhythm and flow, both vertically and horizontally.

Even if readers aren’t conscious of this, it makes text less enjoyable to read and causes more eye strain when things disrupt this flow.

When you set an optimal measure (typically a paragraph width of 45 to 75 characters) the text naturally fills it in with an appropriate rhythm. A well designed font will have the proper sizes and spaces so that the text will look beautiful and be easy to read. Extra spacing between words – especially if it isn’t consistent, like only adding in extra spacing after periods – disrupts this flow. It makes text more jarring and clunky and harder for a person’s eyes to follow.

Typographers like to gauge the “color” of a body of text. If you look at text block from far away, or while squinting, well set text will kind of blur into a solid gray block with even “color” throughout. Random extra spacing disrupts this nice even color, causing ugly gaps that reader’s eyes will stumble over.

So there you have it. Hope this helps explain things.

Introducing BaselineMe

Web designers, do you lay out your sites using a baseline grid? Do you love the sweet, sweet smell of vertical rhythm in the morning? Do you hate blog posts written to sound like marketing text?

So do I. I also hate having to open Photoshop just to make a one pixel wide image every time I want guides for my baseline grid. That’s why I made BaselineMe.

BaselineMe is a little experimental web app that generates a vector image to use when establishing a typographic baseline grid.

How To Use It

Type set consistently on a baseline grid creates a beautiful vertical rhythm. Cue Bringhurst:

Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.

The metering of horizontal space is accomplished almost unconsciously in typography. You choose and prepare a font, and you choose a measure (the width of the column). When you set the type, the measure fills with the varied rhythm of repeating letter shapes, which are music to the eye.

Vertical space is metered in a different way. You must choose not only the overall measure – the depth of the column or page – but also a basical rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

When setting text with HTML and CSS, this rhythmical unit is determined by the line-height property.

If you have a line-height of 24 pixels, you’re going to want all vertical measurements to be multiples of 24 pixels. Therefore if you have headings, blockquotes, lists, or even images (including padding and margins) your text always ends up following the same cadence.

In order to check the math and ensure that the text is lining up properly, most designers create an image to use as a guide. Typically, this image has a width of 1px and a height of the line-height.

Then, they repeat the image vertically on the page using CSS. The declaration looks something like this:

background: url('img/line-height-guide.png') center top repeat;

And the result:

BaselineMe allows you to do the same thing, but you don’t have to create the image. You can just use a URL in the CSS declaration.

If you have a line-height of 24px, just use this:

background: url('http://www.baselineme.com/24');

What about 16px? Bam:

background: url('http://www.baselineme.com/16');

Easy, peasy, lemon-squeezy.

And if you want to save the file for local use, you can paste the URL into your browser. Save the page as an SVG and you’re all set.

For more details about setting type on a baseline grid, see this A List Apart article or this tutorial on Webdesign Tuts+.

To Any Programmers Out There

BaselineMe is a really simple application. Basically, it’s just an SVG file with a little bit of PHP in it to grab the URL. Pretty cool, right?

Anyway, I’m sure the are better ways to do it and more options that would be useful to people. If anybody out there is interested in improving BaselineMe, please email me!

kellymase:

My new resume is up, thanks Will Moyer!

Em and ens

Use spaced en dashes – rather than em dashes or hyphens – to set off phrases.

Standard computer keyboards and typewriters include only one dash, but a normal font of roman or italic type includes as least three. These are the hyphen and two sizes of long dash: the en dash – which is one en (half an em, M/2) in width – and the em dash—which is one em (two ens) wide.

In typescript, a double hyphen (- -) is often used for a long dash. Double hyphens in a typeset document are a sure sign that the type was set by a typist, not a typographer. A typographer will use an em dash, three-quarter em, or en dash, depending on the contest or personal style. The em dash in the nineteenth-century standard, still prescribed in many editorial style books, but the em dash is too long for use with the best text faces. Like the oversized space between sentences, it belongs to the padded and corseted aesthetic of Victorian typography.

Used as a phrase marker – thus – the en dash is set with a normal word space either side.

Use the em dash to introduce speakers in narrative dialogue.

The em dash, following by a thin space (M/5) or word space, is the normal European method of marking dialogue, and it is much less fussy than quotation marks:

— So this is a French novel? she said.
— No, he said, it’s Manitoban.

(via Robert Bringhust, The Elements of Typographic Style)

Near the top of the list (most unsuitable for letterspacing) would be Renaissance italics, such as Arrighi, whose structure strongly implies an actual linkage between one letter and the next. A little farther along would be Renaissance romans. Still farther along, we would find faces like Syntax, which echo the forms of Renaissance roman but lack the serifs. Around the middle of the list, we would find other unserifed faces, such as Helvetica, in which nothing more than wishful thinking bonds the letters to each other. — Robert Bringhurst, The Elements of Typographic Style
Here’s a little Dribble-style preview of the design I’m currently working on. It’s in a love/hate phase right now.

By the way, those letters are selectable text. ;)

Here’s a little Dribble-style preview of the design I’m currently working on. It’s in a love/hate phase right now.

By the way, those letters are selectable text. ;)

I’m currently obsessed with Adobe’s Caslon. I don’t know why but I love it.

I’m currently obsessed with Adobe’s Caslon. I don’t know why but I love it.

Pretty Text On Windows

Anybody using Windows is used to jagged edges when fonts reach a certain size. Since Vista a new text rendering engine has been included called DirectWrite. Unfortunately, it can’t be enabled system wide (as far as I know) and it’s up to individual apps to include DirectWrite support.

If you’re a Firefox user, you can download the Firefox 4 beta and enable DirectWrite.

To turn it on, type ‘about:config’ in the address bar. Then, find the key named ‘gfx.font_rendering.directwrite.enabled’ and double click it to set it to ‘true.’

Finally, you’ll be able to browse a version of the web free of ugly fonts and Apple envy.

(Chrome and Safari don’t support DirectWrite, but Safari still has the option to use Mac OSX rendering. DirectWrite is prettier than OSX rendering, in my opinion, but it’s more video card intensive and results in some sluggishness on certain pages. Internet Explorer 9 will utilize DirectWrite by default. For more on type rendering read this.)

image