Typography in Web Design: How to Change Your Fonts

TYPOGRAPHY IN WEB DESIGN: A HOW-TO GUIDE TO CHANGING FONTS
Download slides at speakerdeck.com/jjspringer/

J.J. SPRINGER WEB & GRAPHIC DESIGNER WordPress, Print, Marketing, &
Television JJSFOLIO.COM

OVERVIEW 1. Purpose of design in the web 2. Catergories
of typefaces 3. Creating hierarchy 4. How to use Google Web Fonts 5. Using WP Google Fonts Plugin 6. Typekit, a professional paid option 7 . @font-face using FontSquirrel

DESIGN MATTERS • Confusing • No authority • Hurts the
eyes • Where’s the info • Untrustworthy • What’s the message?

DESIGN MATTERS • Boring • Not exciting • Amatuer •
Quickly done • Easier to read, but I wonder how much you really care

DESIGN MATTERS • Interesting • Easy info • Exciting •
Authorative • Professional • Can finally focus on the cute cat!

What is the purpose of a website? also for pictures
of cool cats TO CONVEY INFORMATION!! &

ONTO THE FUN PART! Serif with “nubbins” Dingbat pictures Sans
Serif without “nubbins” HDWElf

SERIFS Formal, Authoritative, Traditional, Respectful Old Style Transitional Modern STYLES

SLAB SERIFS Light weights: feminine, deliciate, frail Heavy weights: bold,
daring, attention-seeking *Serifs and line width are the same* RT

SANS SERIFS Modern, Laid-Back, Impactful EASY TO READ! - Good
for older audiences, non-native speakers, people with learning disabilities, and great at small sizes IMAGE COPYRIGHTED ADOBE TYPEKIT

FONTS TO NOT USE! Blackletter - Hard to Read Novelity
Fonts - No one takes me seriously Cursive Fonts - Doesn’t render well

WHAT TO USE AND WHERE 1. Catergorize • Too many
menu items • All on homepage • Confusing I don’t know where to look to find what I want

WHAT TO USE AND WHERE 2. Prioritize • Things are
grouped, but not clear • What do you want to show first? Easy to read, hard to find what I’m looking for

CREATE HIERARCHY You need to know what you need to
assign values to, so break down your info h1 - Site Title h2 - Page Headline h3 - Tagline h4 - Section Headline

VISUAL WEIGHT The more important the information, the more visual
weight. Where does my eye go? bold, ALL CAPS, Size, HighContrast, Color

BODY COPY Body copy is the majority of your information
“Copy” is a term for the written content of a web or print piece Headlines are interesting & bold Body copy is helpful & boring

NOW FOR A LIVE FIREBUG PRESENTATION!

GOOGLE WEB FONTS Google Product, Free Service, Most Used Free
Service google.com/fonts/

GOOGLE WEB FONTS Download the fonts for Photoshop Type a
statement you want to preview Select options you want

GOOGLE WEB FONTS Click Arrows and Sliders to Change the
Options Fonts will Automatically Update

GOOGLE WEB FONTS Click “Poster” for Alternative View of Font
Families

GOOGLE WEB FONTS Click on pop out button to see
all glyphs, font faces, and copyright info

GOOGLE WEB FONTS Click “Add to Collection” button when done
and bottom box pops up. Click the “Use” button to continue.

Click which fonts you want to download from the selected
typeface Google will warn you how long your fonts will take to load Google will give you the code to add and how to use it in your CSS

GOOGLE WEB FONTS Copy code Paste code right after <head>
tag in header.php file and save

GOOGLE WEB FONTS Copy CSS code Inspect element in Firebug,
grab CSS ID or Class

GOOGLE WEB FONTS Locate the CSS code you want to
apply font to Paste Google CSS code here. Then save and refresh browser

GOOGLE WEB FONTS Changes are applied! Repeat process for each
element you want to change

WP GOOGLE FONTS PLUGIN Plugin, Free Service, Easy, Minimal Coding
Experience Required wordpress.org/extend/plugins/wp-google-fonts/

WP GOOGLE FONTS Click on the drop-down menu and select
which font you want Install and activate the plugin. Click “Settings” button This always lives in menu under “Settings”

WP GOOGLE FONTS Click on the element from a pre-selected
list Or type in your own CSS Click “Save All Fonts”

WP GOOGLE FONTS Refresh your browser and see the changes

TYPEKIT Adobe Product, Paid Service, Professional Copyrighted Fonts, Used by
Automattic for WordPress.com typekit.com

Typekit service is included with Creative Cloud subscriptions to Adobe

TYPEKIT HOW-TO Go to typekit.com and Login with your Adobe
ID

Font Search Classification Headers vs Body Copy } Properties: Weight
Width X-Height Contrast Caps Only

TYPEKIT HOW-TO Scroll over onto font option Clicking light green
will bring up font family page

TYPEKIT HOW-TO Click “Add to Kit” and enter website info

TYPEKIT HOW-TO Add CSS Selectors here Font Face Options Click
“Publish” when done

CSS SELECTORS? Inspect element to change Copy ID or Class

TYPEKIT HOW-TO Click “Embed Code” Copy Code in Popup Box

TYPEKIT HOW-TO Paste code right before </head> tag in header.php
Save and open up website

TYPEKIT HOW-TO Refresh your page to see results

@FONTFACE (USING FONTSQUIRREL) Not used as much anymore, FS fonts
are 100% free for commercial use, Turn your own font into a web font fontsquirrel.com

FONTSQUIRREL Can make any @fontface from fonts that you create
or own (check copyright first before making fonts) Search by category Search by name

FONTSQUIRREL Click on the font that you are interested in
Tells you if there are different styles of this font available

FONTSQUIRREL

FONTSQUIRREL You can select which font formats you want to
download, just go ahead and download them all. Different browsers render the fonts differently, so you need various formats so everyone can see your fonts

FONTSQUIRREL Zipped file will include the CSS code, the font
in different formats, a license (that includes copyright), and normally a demo of the font so you can test it

FONTSQUIRREL You will need to pull over those fonts into
your theme folder. I recommend making a new folder called “fonts” just to keep everything clean

FONTSQUIRREL Now open the CSS file they gave you. Add
fonts/ in front all fonts in the url to make sure that they link properly

FONTSQUIRREL Copy the CSS and paste it in the style
sheet in your theme. I paste it at the bottom. Make sure to properly comment your style sheet

Inspect element to change Copy ID or Class FONTSQUIRREL

FONTSQUIRREL Locate your code and add font-family For @font-face you
need to a the ‘ around the whole name. Make sure you select the correct one, different weights are called out differently. Save and refresh. Changes should be there. font-family: ‘Font Name’, sans-serif;

FONTSQUIRREL Now notice the rendering issues that can occur and
that’s why @font-face isn’t being used as much anymore Firefox Chrome

ADDITIONAL INFO Questions?!? Thanks everyone! Now go and make the
web beautiful! Download slides at speakerdeck.com/jjspringer/

Typography in Web Design: How to Change Your Fonts

Typography in Web Design: How to Change Your Fonts

More Decks by JJ Springer

Other Decks in Design

Featured

Transcript