Design Principals in Practice: Typography in a Grocery Store Window

I recently saw this notice in a local grocery store window:

grocerystorenotice

So it’s pretty ugly from a purely aesthetic point of view.

But more than that, I don’t feel that it effectively communicates the message.

Rather than just making it look prettier (which would be pretty easy given it’s current state) it’s good to first think about the problem it’s trying to solve.

More...

SHARE:

An Introduction to Design Course

My newest Pluralsight course has just been released.

It’s about learning the fundamentals of design and applying them to your own work.

It covers topics such as: typography, colour meaning and choice, fundamental Gestalt Principles, and some other important and useful principles.

From the description:

“Design is all around us but most of us don't notice it. By the end of this course you'll start to notice design elements in everyday life. By understanding the fundamentals of design, you can start to apply them to your software UI & UX, marketing materials, emails, web design and pretty much anything else you produce.”

You can check it out here.

SHARE:

Redesigning DontCodeTired.Com (Part 6) - Creating Mobile Styling Using a Typography-Out Approach

Redesigning DontCodeTired.Com Part 5 - Showing and Hiding Mobile Specific Elements

The idea of typography-out is that for websites where the textual content is king, it makes sense to elevate it to the thing of primary importance. The thing that drives the rest of the design. The opposite approach is to focus on the canvas as the first thing and work "inwards' to get to the content (text) last (putting "style" or "decoration" or "chrome" before content).

Letting Typography Lead the Design

What I mean by this is the way the article text fills the screen on the mobile emulator: how many characters\words per line (i.e. the measure), leading, font size, typeface choice. All of these basic typogographic principles (of which I am not an expert) will be applied to make the content readable. Above all, readability is the primary consideration.

(Starting to learn more about typography (and other aspects of design) has given me insight and great respect for professional web designers...)

I'll consider reading distance (how far people are likely to be from the screen) as this informs the choice of font size, etc. For tablet\desktop usage, the font size may need to be different to accommodate different physical reading distances.

Choosing a Typeface

The CSS3 @font-face rule allows us to use typefaces that are different from the standard web-safe fonts. It allows us to reference new fonts to use on our sites by loading a font file into the browser and then referencing it in the CSS.

There are (as with anything Web related) different formats (WOFF, EOT, TTF/OTF, SVG) that different browsers support. The awesome Font Squirrel makes it easy to generate the CSS - and they have a load of "commercial-use free fonts".

I chose PTSansRegular for body and PTSerifCaptionRegular for headings, generating the @font-face and downloading multiple font format files courtesy of the awesome FontSquirrel. For the less important elements such as the published time I chose PTSansNarrowRegular.

Setting up the fonts

FontSquirrel generates a stylesheet.css which contains the @font-face definitions. This file sets the font-weight and font-style to normal for each of the included fonts.

This can cause a problem where text will be doubly emboldened or italicized. For example, if the <em> style below is used, the browser may try to initializes an already italic typeface and you may get horribly double slanted (italicized) text:

em {
font-family: 'PTSansItalic', Georgia, serif;
}

To fix this we can edit FontSquirrel's CSS and specify font-style: italic; in the font-face:

@font-face {
font-family: 'PTSansItalic';
src: url('PTS56F-webfont.eot');
src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS56F-webfont.woff') format('woff'),
url('PTS56F-webfont.ttf') format('truetype'),
url('PTS56F-webfont.svg#PTSansItalic') format('svg');
font-weight: normal;
font-style: italic;
}

(You can do this for bold typefaces too..)

A Nice Vertical Flow

We want the vertical flow of text to look good. One way we can do this is to space things vertically in a consistent way.

The rem unit of measurement is a newer CSS concept with some support. It is similar to em in that it is a relative measurement, but unlike em it is relative to the root HTML element rather than the element's immediate parent.

As rem is not supported in older browsers we can specify a px value first and then a rem value. This could be pretty tedious, but again SASS makes it less painful.

The following extract of SASS defines some variables and a mixin to set basic typography properties:

/*
Variables
*/
$baseFontSize: 16; // size for px values and rem calculations, i.e. 1 rem = this value
$lineHeightMultiple: 1.5; // e.g. 1.5 = 150% line height
$baseVerticalRhythm: $baseFontSize * $lineHeightMultiple;
@mixin standardTypeMeasure($multipleOfBaseRhythm){
$px :$baseVerticalRhythm * $multipleOfBaseRhythm;
font-size:  $px + px;
font-size: $px / $baseFontSize + rem;
line-height: ($px * $lineHeightMultiple) + px;
line-height: (($px / $baseFontSize) * $lineHeightMultiple) + rem;
}

This mixin can then be called from our CSS rules:

time {
@include standardTypeMeasure(0.5);
font-family: 'PTSansNarrowRegular', Georgia, serif; 
}

This results in the following generated CSS:

time {
font-size: 12px;
font-size: 0.75rem;
line-height: 18px;
line-height: 1.125rem;
font-family: 'PTSansNarrowRegular', Georgia, serif; }

Browsers that do not understand rem will instead use the `px' value.

Investigating CSS Hyphenation

I experimented with CSS text justification and hyphenation but it didn't look great and current browser support at the time of writing is only 24.77%. I was testing in Firefox using the vendor prefix :

text-align: justify;
-moz-hyphens: auto;

A Nice Chrome Plugin

There is a nice Chrome browser plug-in which quickly lets you change the browser window to one of a number of preset sizes (e.g. iPhone, iPad etc.) or create your own.

For the mobile version I've been mostly using the Windows Phone 7 emulator, however this Chrome plugin will be great for future parts of the redesign.

In Conclusion

Throughout this section I've also been continuing to hide elements that are not good for mobile. I've also been fixing up bits of markup (for example on the add comments section) to make it easier to style.

At this point I'm still not thinking about non-typography elements such as decoration, colors, logos, etc. This part will come later (and is going to be heaps of fun).

This step took a lot longer than I thought it might, but I'm OK with that as one of the goals of this redesign is to focus on the text.

Screen Shots



SHARE: