• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hints & Scales: The Art and Science of Web Type
 

Hints & Scales: The Art and Science of Web Type

on

  • 479 views

An introduction into the theory and technical details of web type.

An introduction into the theory and technical details of web type.

Statistics

Views

Total Views
479
Views on SlideShare
375
Embed Views
104

Actions

Likes
1
Downloads
7
Comments
0

1 Embed 104

http://www.iracummings.com 104

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hints & Scales: The Art and Science of Web Type Hints & Scales: The Art and Science of Web Type Presentation Transcript

    • HINTS & SCALES The Science & Art of Designing With Web TypeSunday, 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: @irafcummingsSunday, January 27, 13
    • THE BASIC OUTLINESunday, January 27, 13
    • THE BASIC OUTLINE The Importance of Web TypeSunday, January 27, 13
    • THE BASIC OUTLINE The Importance of Web Type Type FundamentalsSunday, January 27, 13
    • THE BASIC OUTLINE The Importance of Web Type Type Fundamentals Technical ImplementationSunday, January 27, 13
    • THE BASIC OUTLINE The Importance of Web Type Type Fundamentals Technical Implementation Problems and SolutionsSunday, January 27, 13
    • THE BASIC OUTLINE The Importance of Web Type Type Fundamentals Technical Implementation Problems and Solutions The Future of Web TypeSunday, January 27, 13
    • THE BASIC OUTLINE The Importance of Web Type Type Fundamentals Technical Implementation Problems and Solutions The Future of Web Type ResourcesSunday, January 27, 13
    • Our Definition of Web Type Non-system fonts, hosted remotely, that are displayed on a screen.Sunday, January 27, 13
    • What’s the Point?Sunday, January 27, 13
    • THE PURPOSE OF WEB TYPESunday, January 27, 13
    • THE PURPOSE OF WEB TYPE BrandingSunday, January 27, 13
    • THE PURPOSE OF WEB TYPE Branding DifferentiationSunday, January 27, 13
    • THE PURPOSE OF WEB TYPE Branding Differentiation For Your Readers’ SakeSunday, January 27, 13
    • Type FundamentalsSunday, January 27, 13
    • Character Terminology BASIC CHARACTER ANATOMYSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • The basic anatomy of charactersSunday, January 27, 13
    • Paragraph Terminology BASIC PARAGRAPH ANATOMYSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • The measure needs to be just rightSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • The difference between leading a line heightSunday, January 27, 13
    • Leading in practiceSunday, January 27, 13
    • Exceptions to the leading rulesSunday, January 27, 13
    • Making Type Beautiful MORE THAN READABLESunday, January 27, 13
    • 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:Sunday, January 27, 13
    • 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: ContrastSunday, January 27, 13
    • 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 RhythmSunday, January 27, 13
    • 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 Rhythm SpacingSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • Typeface pairing examplesSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • Type with no rhythmSunday, January 27, 13
    • 20px Baseline GridSunday, January 27, 13
    • 20px baseline gridSunday, January 27, 13
    • M A K I N G T Y P E B E AU T I F U L : R H Y T H M Modular scale Another way to create rhythm is with a scale that relates to your content or context.Sunday, January 27, 13
    • M A K I N G T Y P E B E AU T I F U L : R H Y T H M 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.6Sunday, January 27, 13
    • 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 scaleSunday, January 27, 13
    • M A K I N G T Y P E B E AU T I F U L : R H Y T H M It’s easy to build your own scale: Use modularscale.com to do the math.Sunday, January 27, 13
    • 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.Sunday, January 27, 13
    • Spacing on theverge.comSunday, January 27, 13
    • Technical ImplementationSunday, January 27, 13
    • Implementation THIRD-PARTY SERVICES SELF-HOSTED FONT FILESSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • 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 files on your own server. Easy to implement with CSS alone.Sunday, January 27, 13
    • 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 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 */ }Sunday, January 27, 13
    • Browser Support NERVOUS?Sunday, January 27, 13
    • 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.Sunday, January 27, 13
    • 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 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.Sunday, January 27, 13
    • Anticipating Problems & Finding SolutionsSunday, January 27, 13
    • Technical Issues DOWNLOAD SIZES SERVER REQUESTS TYPE UNITSSunday, January 27, 13
    • 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 different font files that a user has to download.Sunday, January 27, 13
    • TECHNICAL ISSUES: HTTP REQUESTS With each server request there is the potential for more issues.Sunday, January 27, 13
    • 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.Sunday, January 27, 13
    • Aesthetic Issues RESPONSIVE DESIGN SCREEN RENDERING FREE FONTS FONT STACKS READABILITYSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • AESTHETIC ISSUES: TYPE RENDERING ON SCREEN Type rendering can vary widely. Results will be different based on platform, operating system, browser, typeface and even the version of the typeface.Sunday, January 27, 13
    • Type rendering from vector to bitmapSunday, January 27, 13
    • A word of caution: beware the free web fonts.Sunday, January 27, 13
    • Dangerous waters ahead…Sunday, January 27, 13
    • 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.Sunday, January 27, 13
    • 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:Sunday, January 27, 13
    • 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: TestSunday, January 27, 13
    • The Future of Type on the WebSunday, January 27, 13
    • Symbol & Icon Fonts RESOLUTION-INDEPENDENT GRAPHICS FTWSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • The Foundation Icon Font…fontSunday, January 27, 13
    • Ligatures TWO USES FOR JOINING CHARACTERSSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • Why ligatures are importantSunday, January 27, 13
    • 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.Sunday, January 27, 13
    • FF ChartwellSunday, January 27, 13
    • Symbolset typefacesSunday, January 27, 13
    • ResourcesSunday, January 27, 13
    • R E S O U RC E S : M O D E R N I Z R Modernizr to detect @font-face supportSunday, January 27, 13
    • 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 packagesSunday, January 27, 13
    • 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 charactersSunday, January 27, 13
    • 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 contextSunday, January 27, 13
    • Set web type in context, in real timeSunday, January 27, 13
    • R E S O U RC E S : L I N K S Slides and additional links available at: http://iracummings.com/type-talk/Sunday, January 27, 13
    • THANKS Any questions?Sunday, January 27, 13
    • 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.Sunday, January 27, 13