Hints & Scales: The Art and Science of Web Type

HINTS & SCALESThe Science & Art of Designing With Web Type

Sunday, January 27, 13

I N T RO D U C T I O N S

Ira F. Cummings

Brand Strategist and Designeremail: [email protected]: iracummings.comtwitter: @irafcummings


mailto:[email protected]

mailto:[email protected]

T H E B A S I C O U T L I N E



The Importance of Web Type




Type Fundamentals




Type Fundamentals

Technical Implementation




Type Fundamentals


Problems and Solutions




Type Fundamentals



The Future of Web Type




Type Fundamentals



The Future of Web Type

Resources


Our Definition of Web Type

Non-system fonts, hosted remotely, that are displayed on a screen.


What’s the Point?


T H E P U R P O S E O F W E B T Y P E



Branding



Branding

Differentiation



Branding

Differentiation

For Your Readers’ Sake


Type Fundamentals


Character Terminology

BASIC CHARACTER ANATOMY


C H A R AC T E R A N AT O M Y

The parts of a character

define its personality.

Understanding the personality helps us choose readable typefaces and set them beautifully.


The basic anatomy of characters


Paragraph Terminology

BASIC PARAGRAPH ANATOMY


PA R AG R A P H A N AT O M Y: M E A S U R E

Measure

Very simply, it is the length of a line of text.

The general guideline is 40–65 characters, give or take and depending on the typeface.


The measure needs to be just right


PA R AG R A P H A N AT O M Y: L E A D I N G

Leading and line height set the spacing

between lines of type.


The difference between leading a line height


Leading in practice


Exceptions to the leading rules


Making Type Beautiful

MORE THAN READABLE


M A K I N G T Y P E B E AU T I F U L

There are three main components

of beautiful typography:





Contrast





Contrast

Rhythm





Contrast

Rhythm

Spacing


M A K I N G T Y P E B E AU T I F U L : C O N T R A S T

Chose typefaces that are different from

each other, but work well together.

Make sure that different content (eg. headers, sub-heads, body copy) are visually differentiated.


Typeface pairing examples


M A K I N G T Y P E B E AU T I F U L : R H Y T H M

Our eyes recognize—and look for—

visual patterns in content.

One way to achieve this rhythm is with a baseline grid that uses a shared baseline measurement across the units of content.


Type with no rhythm


20px Baseline Grid


20px baseline grid



Modular scale

Another way to create rhythm is with a scale that relates to your content or context.



Modular scale: an example

Number 1: 14px (base type size)

Number 2: 40px (touch target size)

Ratio: 1:1.618 (golden section)

Multiply the numbers by the ratio to derive a variety of number to use.

406.4

247.1

251.1

169.4

104.7

95.9

64.7

59.3

40.0

36.6

24.7

22.6

15.2

14.0

9.4

8.6


Type with modular scale

406.4

247.1

251.1

169.4

104.7

95.9

64.7

59.3

40.0

36.6

24.7

22.6

15.2

14.0

9.4

8.6



It’s easy to build your own scale:

Use modularscale.com to do the math.


M A K I N G T Y P E B E AU T I F U L : S PAC I N G

The (negative) space around type is

just as important as the content.

Look for ways to creatively focus the readers eyes on the content.


Spacing on theverge.com


TechnicalImplementation


Implementation

THIRD-PARTY SERVICESSELF-HOSTED FONT FILES


I M P L E M E N TAT I O N : 3 R D -PA RT Y S E RV I C E S

3rd-party services provide a license for

the type, as well as plug-and-play code.

Services allow access to a large type library for a reoccurring fee, usually based on a bandwidth or page-view metric.


I M P L E M E N TAT I O N : U S I N G @ F O N T-FAC E

Serving font files from your own server via the @font-face CSS attribute.

Purchase a license and host font files on your own server.

Easy to implement with CSS alone.



In your stylesheet:

@font-face {! font-family: ‘Univers Regular’; /* Typeface name */! src: url('Univers_Reg.eot?') format('embedded-opentype'), !! ! /* IE, ? prevents a 404 on .woff/.ttf tiles */! url('Univers_Reg.otf') format('opentype'), /* Moz/Webkit */! url('Univers_Reg.svg') format('svg'); /* iOS < 4.0 */}

Then:

p {! font-family: ‘Univers Regular’, ‘Helvetica’, sans-serif;! font-weight: 400; /* avoids browser issues */}


Browser Support

NERVOUS?


B ROW S E R S U P P O RT

It’s pretty good actually (phew)

If you serve the right font file, @font-face is supported by all modern browsers.

The main exception is Opera Mini.



A note about formats:

EOT (Embedded Open Type) works for IE and only for IE.

OTF (Open-Type Font) is your best cross-browser option, with…

TTF (True Type Font) and…

WOFF (Web Open Font Format) coming in second.

SVG fonts are a legacy for format for old version of iOS Safari, the Android browser & Chrome.


Anticipating Problems & Finding Solutions


Technical Issues

DOWNLOAD SIZESSERVER REQUESTSTYPE UNITS


T E C H N I C A L I S S U E S : D OW N L OA D S I Z E S&

Keeping download file size small will

improve the experience all around.

Minimize the size and number of different font files that a user has to download.


T E C H N I C A L I S S U E S : H T T P R E Q U E S T S

With each server request there is the

potential for more issues.


T E C H N I C A L I S S U E S : T Y P E U N I T S

With CSS, there are a variety of ways

to define the size of type (and leading,

spacing, layout…).

Ems are still the best bet, but the math can get tricky since the context is important.


Aesthetic Issues

RESPONSIVE DESIGNSCREEN RENDERINGFREE FONTSFONT STACKSREADABILITY


A E S T H E T I C I S S U E S : R E S P O N S I V E D E S I G N

As the layout changes with context, your

type needs to change as well.

When content width changes, the measure, leading and spacing should remain comfortable.


A E S T H E T I C I S S U E S : T Y P E R E N D E R I N G O N S C R E E N

Type rendering can vary widely.

Results will be different based on platform, operating system, browser, typeface and even the version of the typeface.


Type rendering from vector to bitmap


A word of caution: beware the

free web fonts.


Dangerous waters ahead…


A E S T H E T I C I S S U E S : F O N T S TAC K S

Even though you’re serving font files, you

still need to consider your font stacks.


A E S T H E T I C I S S U E S : M A K I N G I T A L L WO R K

There is really one thing that you can do

to ensure excellent typography:


A E S T H E T I C I S S U E S : M A K I N G I T A L L WO R K

There is really one thing that you can do

to ensure excellent typography:

Test


The Future of Type on the Web


Symbol & Icon Fonts

RESOLUTION-INDEPENDENT GRAPHICS FTW


S Y M B O L & I C O N F O N T S

Save bandwidth and gain

resolution independence.

Currently, the best usage is as icons to complement text or as fancy glyphs that have good fallbacks.


The Foundation Icon Font…font


Ligatures

TWO USES FOR JOINING CHARACTERS


L I G AT U R E S

Ligature support is on the horizon, but

relies on support from both browser

makers and type foundries, not to mention

the operating system.

Currently in the CSS3 draft as an option of the font-features-setting property.


Why ligatures are important


T H E L I T T L E S T U F F: L I G AT U R E S

Beyond more pleasing character

combinations, ligatures could allow

creative use of type.


FF Chartwell


Symbolset typefaces


Resources


R E S O U RC E S : M O D E R N I Z R

Modernizr to detect @font-face support


R E S O U RC E S : F O N T S Q U I R R E L @ F O N T-FAC E G E N E R AT O R

Creates @font-face packages


R E S O U RC E S : F O N T F O N T S U B S E T T E R

Strip fonts of non-essential characters


R E S O U RC E S : R E S P O N S I V E T Y P E

FitText expands or shrinks type

based on context


Set web type in context, in real time


R E S O U RC E S : L I N K S

Slides and additional links

available at:

http://iracummings.com/type-talk/




THANKSAny questions?


C R E D I T S

This presentation set in Univers and Hoefler Text, designed by Adrian Frutiger and Jonathan Hoefler, respectively.

Demonstration copy is taken from en.wikipedia.org/wiki/Typography.

All photographic images pulled from The Commons on flickr.com.

All images of websites are captured from their respective domains.

Other content and images created by Ira F. Cummings.

This presentation created on a Mac with Keynote.


Documents

Hints & Scales: The Art and Science of Web Type