Hints & Scales: The Art and Science of Web Type

HINTS &
SCALES
The 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 Designer
email: ira@iracummings.com
url: iracummings.com
twitter: @irafcummings


THE BASIC OUTLINE


THE BASIC OUTLINE

The Importance of Web Type


THE BASIC OUTLINE

Type Fundamentals


THE BASIC OUTLINE

Type Fundamentals
Technical Implementation


THE BASIC OUTLINE

Type Fundamentals
Problems and Solutions


THE BASIC OUTLINE

Type Fundamentals
The Future of Web Type


THE BASIC OUTLINE

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?


THE PURPOSE OF WEB TYPE



Branding



Branding
Differentiation



Branding
Differentiation
For Your Readers’ Sake


Type
Fundamentals


Character Terminology
BASIC CHARACTER ANATOMY


C H A R A C 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


P A R A G 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


P A R A G 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 diﬀerent content (eg. headers,
sub-heads, body copy) are visually diﬀerentiated.


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 406.4
247 .1
251.1
Number 1: 14px (base type size) 169.4
104.7
Number 2: 40px (touch target size) 95.9
64.7
Ratio: 1:1.618 (golden section) 59.3
40.0
Multiply the numbers by the ratio to 36.6
24.7
derive a variety of number to use. 22.6
15.2
14.0
9.4
8.6


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



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 P A C 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


Technical
Implementation


Implementation
THIRD-PARTY SERVICES
SELF-HOSTED FONT FILES


I M P L E M E N TAT I O N : 3 R D - P A 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- F A C E

Serving font files from your own server
via the @font-face CSS attribute.
Purchase a license and host font ﬁles 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 ﬁle, @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 SIZES
SERVER REQUESTS
TYPE UNITS


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

Keeping download file size small will
improve the experience all around.
Minimize the size and number of diﬀerent font ﬁles
that a user has to download.


TECHNICAL ISSUES: HTTP REQUESTS

With each server request there is the
potential for more issues.


TECHNICAL ISSUES: TYPE UNITS

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 DESIGN
SCREEN RENDERING
FREE FONTS
FONT STACKS
READABILITY


AESTHETIC ISSUES: RESPONSIVE DESIGN

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.


AESTHETIC ISSUES: TYPE RENDERING ON SCREEN

Type rendering can vary widely.
Results will be diﬀerent 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 TA C 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


SYMBOL & ICON FONTS

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- F A C 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/


THANKS
Any questions?


CREDITS

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.


Hints & Scales: The Art and Science of Web Type

Recommended

Recommended

More Related Content

Featured

Featured (20)

Hints & Scales: The Art and Science of Web Type