g
A
Crash Course
!
Typography
by @kingsidharth
for WordCamp Baroda 2014
#WCBaroda | 26th January, 2014
in
fi
&
Slide 2
Slide 2 text
More than 90%*
of the communication on the web is text.
So making that text work is important.
Very important.
Seriously!
* You might’ve other numbers; but you know what I mean.
Slide 3
Slide 3 text
A History of Typography from
Print & Graphic Design
+ font vs. typeface
Slide 4
Slide 4 text
Fonts have feelings too!
Do you love me? Tell me you love me!
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Shut up!
Slide 10
Slide 10 text
Shut up!
Slide 11
Slide 11 text
Shut up!
Slide 12
Slide 12 text
Classification
!
Choosing a Typeface
&
Slide 13
Slide 13 text
Classy, Authority, Timeless, and Old.
Slide 14
Slide 14 text
Sans-Serif
New, Young, Fresh, Clean, and Modern
Slide 15
Slide 15 text
Geometric
Humanist
Display
Slab Serif
Fixed Width
Slide 16
Slide 16 text
!
Basic
Typesetting
Slide 17
Slide 17 text
Size Does Matter
font-size: 16px;
Keep it 14px to 18px
for general content website
Repeat After Me:
“I will not justify align the text!”
Slide 23
Slide 23 text
Words Per Line
width & font-size
Keep it 70-80 words per line.
Google: Golden Ratio Typography
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
L e t t e r S p a c i n g
letter-spacing: 1px;
Play around. For highlights, headlines.
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Line Height
line-height: 1.6em;
Keep it between 1.5em to 1.6em
Google: Golden Ratio Typography
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Web Specific Tech
Slide 38
Slide 38 text
@font-face
Open Sans, Ubuntu, Roboto, etc.
Use them wisely.
Slide 39
Slide 39 text
WordPress
now uses
Open Sans
for the backend.
Slide 40
Slide 40 text
Responsive Typography
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
WordPress Specific Tools
for styling & typography
Slide 43
Slide 43 text
.format-text
.entry-title
.entry-content
Control styling of the of post/page headline(s)
Control the styling of the main body of post/page
Control the styling of a text post. (Multiple post type exist in WP)
Most good themes use these classes.
Slide 44
Slide 44 text
Body Classes to Control Typography
of Post/Page Types
”>
Most good themes have this in place.
Slide 45
Slide 45 text
.single .entry-title {
// Style Rules for Headline
}
!
.single .entry-content p {
// Paragraph Rules for Main Content of Your Post
}
.page, #page- //single page
.post, #post- //single post
.home //homepage!
.search //search result page
.tag, .category, .author
Slide 48
Slide 48 text
Millions
of
Plugins, Themes & Resources
from the
WordPress
community
Slide 49
Slide 49 text
Questions?
@kingsidharth
www.kingsidharth.com
king@kingsidharth.com
22-year old
Designer & Entrepreneur @ Instamojo
Been taught by WordPress since high-school