Better Typography

Better TypographyMark Boulton

markboulton.co.ukmarkboultondesign.com

mark@markboulton.co.uk

1. Structure2. Process3. Macro typography4. Micro typography

Typography and Web 2.0

seducedart & sex

fromantiquity

to now

seducedart & sex

fromantiquity

to now

A world of Verdana and Arial

typography1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2

typography1 the mechanical notation and arrangement of language.

Typography is not...

...deciding which is best, Verdana or Arial.

...just a designers responsibility.

S T R U C T U R E

‘Typography has one plain duty before it and that is to convey information in writing.’

Emil Ruder

Information is language

words → sentencessentences → paragraphsparagraphs → groupings

groupings → sectionssections → document

Documents have a conceptual structure.

Author’sConceptual

Structure

Reader’sConceptual

Structure

Designer

Structure

Content & Presentation

Designer

Structure

Designer

P R O C E S S

Elements of User ExperienceJesse James Garrett

surface

skeleton

structure

strategy

visual design

information design

interaction design

requirements

user needs / siteobjectives

For a much better diagram go to: http://www.jjg.net/elements/pdf/elements.pdf

A linear process?

surface

skeleton

structure

strategy

visual design

information design

interaction design

requirements

project lifespan?

surface

skeleton

structure

strategy

visual design

information design

interaction design

requirements

typography

surface

skeleton

structure

strategy

visual design

information design

interaction design

requirements

typography

surface

skeleton

structure

strategy

visual design

information design

interaction design

requirements

typography

‘Can you design a theme for me?’*

* Interchangeable with ‘skin’

Content & Presentation...again!

Greybox wireframes

Greybox Methodology: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php

Jesse Bennett-Chamberlain: http://31three.com/

Look at typographic design earlier in the process.

M A C R O T Y P O G R A P H Y

The big stuff

Creating spacial relationships

Golden Section

A way of organising stuff

Provide a visual language

Answer layout questions

Editor’s picksBlogs

Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs

Sign in • Register • Read today’s paper • Jobs

Searchcomment is free...

Space cadets

Dan Kennedy05:00pm: Is seeing a UFO anymore crazy than believing GodCreated the universe in six days> Itis if you are running to bepresident of the United States.Comments

Ed Vaizey Nov 06 07, 04:40pmThe Queen’s speech: Big onshort-term tricks, and lacking inlong-term vision just about sumsup the government’s new legislationComments

A bankrupt hotchpotch

End of mutual respect

Derek Wall Nov 06 07, 04:20pmAs the Respect party splits in two

State of emergency by Steve Bell

If Ball wants better schools, hemust scrap faith selection

Space cadets

M I C R O T Y P O G R A P H Y

The little stuff

Hyphens are not dashes

Britain’s workers improve their lives - by doing nothing

Britain’s workers improve their lives -- by doing nothing

Britain’s workers improve their lives—by doing nothing

Britain’s workers improve their lives – by doing nothing

- hyphen Müller-Brockmann

– en dash 3–6 April; 25–30 mm a phrase marker – thus – with spaces

— em dash a phrase marker—thus—with no spaces — Doesn’t sound much like a bee to me. — It’s a bloody aardvark!

− minus 4−1=3

Never negatively space lowercase

Y O U C A N S P A C E C A P S

H E A D I N G S & S U B H E A D I N G S

{ H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A C T

Hand-crafted pixels & text.SimpleBits is a tiny web design studio founded by

designer and author Dan Cederholm. We create simple,

readable interfaces balanced with a standards-based

methodology. Learn more

Planet Microformats

A giant master feed of anything and everything tagged with “microformats”

from Brian Suda. {02.20.07}

Web Directions North

I’ve returned from several days in Vancouver, and the first-ever Web

Directions North. It was a great trip, a great conference, and my second

attempt at snowboarding in the last 20 years.

I’ll first say congrats to Maxine, John, Dave and

Derek for putting on what was an oustanding

L A T E S T F E A T U R E D W O R K

MTV.com

XHTML/CSS development

Cork’d

Creative Director

TravelPost.com

Logo + interface design

S P E A K I N G E V E N T S

SXSW Interactive

March 9-13, 2007 ~ Austin, TX

An Event Apart Boston

March 26-27, 2007 ~ Boston

@media 2007 (America)

May 24-25, 2007 ~ San Francisco

@media 2007 (Europe)

June 7-8, 2007 ~ London

R E C E N T N O T E B O O K A R T I C L E S & Q U I C K B I T S

www.simplebits.com

<h1>Hand-crafted pixels<span class="amp">&</span> text.</h1>

span.amp { font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-style: italic; font-size: 110%; }

Framing navigation

Registration

Conference

Registration

Conference

Registration

Conference

Registration

Conference

Registration

Conference

Registration

Conference

Framing tables

Barry Island 0533 0600 0600

Rhoose 0540 0610 0612

Llantwit Major 0550 0612 0622

Bridgend 0552 0620 0648

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

Text numerals like these—23, 48, 192 and 2096—belong in text

Lining numerals like these—23, 48, 192 and 2096—are better in tables.

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

Rhoose 0540 0610 0612

Bridgend 0552 0620 0648

1. StructureLanguage; Conceptual models; Content & Presentation.

2. ProcessGreybox wireframes; Typography earlier in the process.

3. Macro typographyThe big stuff. Composition & Grids.

4. Micro typographyThe little stuff. Typesetting.

‘...It is not surface, it is not the last thing that needs to be considered, it is the thing itself’

Stephen Fry

Thank you

Slides and resources at : http://www.markboulton.co.uk/present/web2berlin/

Better Typography

Technology

Advancements in Web Typography (WebFonts and WOFF) · 2020. 2. 22. · Web typography with regards to design controllability has definitely gotten better since the earlier days of

Nokia Typography

Typography. Typography exists to honor content. —Robert Bringhurst

Web Typography

Design ~ Typography Typography 101 Using Typography to Enhance Content

Typography 1

Reading Typography—Writing Typography

Graphic Design · Expressive Typography 1 Graphic Design: Typography Expressive Typography exists to honor content. — Robert Bringhurst, The Elements of Typographic Style Typography

Typography Resubmission

Part I The History of Typography and Place...series profiling typography and dimensional typography in the sign making industry. Wrtitten by Craig Berger 1 Typography, Placemaking

Typography lecture

Good typography

Typography. What do we know about Typography?

Typography, Placemaking and Signs Pt III: Typography and the Code

Chapter 7 Typography, Style Sheets, and Color€¦ · Chapter 7 Typography, Style Sheets, and Color Mrs. Johnson . Typography Typography refers to the arrangement, shape, size, style,

Typography td

Typography - University of Colorado Boulderbreeze.colorado.edu/ATOC6020/2017_Fall_files/Carter2013_Ch5_Typ… · Typography Typography is the art of selecting and arranging characters

Typography Timeline (Typography II)

Typography Selecting appropriate typefaces for a document. Typography

Typography