A Crash Course in Typography — WordCamp Baroda 2014

g A Crash Course ! Typography by @kingsidharth for WordCamp
Baroda 2014 #WCBaroda | 26th January, 2014 in ﬁ &

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.

A History of Typography from Print & Graphic Design +
font vs. typeface

Fonts have feelings too! Do you love me? Tell me
you love me!

Shut up!

Classification ! Choosing a Typeface &

Classy, Authority, Timeless, and Old.

Sans-Serif New, Young, Fresh, Clean, and Modern

Geometric Humanist Display Slab Serif Fixed Width

! Basic Typesetting

Size Does Matter font-size: 16px; Keep it 14px to 18px
for general content website

Alignment text-align: left; .alignleft .alignright .aligncenter

Repeat After Me: “I will not justify align the text!”

Words Per Line width & font-size Keep it 70-80 words
per line. Google: Golden Ratio Typography

L e t t e r S p a c
i n g letter-spacing: 1px; Play around. For highlights, headlines.

Line Height line-height: 1.6em; Keep it between 1.5em to 1.6em
Google: Golden Ratio Typography

Web Specific Tech

@font-face Open Sans, Ubuntu, Roboto, etc. Use them wisely.

WordPress now uses Open Sans for the backend.

Responsive Typography

WordPress Specific Tools for styling & typography

.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.

Body Classes to Control Typography of Post/Page Types <body class=“
<?php if(is_single()) { echo ‘single’; } ?> ”> Most good themes have this in place.

.single .entry-title { // Style Rules for Headline } !
.single .entry-content p { // Paragraph Rules for Main Content of Your Post }

is_single() //single post/page is_page() //single page is_post() //single post is_front_page()
//front page. duh! is_archive() //month, year, tax, category is_category() //month, year, tax, category

.page, #page-<id> //single page .post, #post-<id> //single post .home //homepage!
.search //search result page .tag, .category, .author

Millions of Plugins, Themes & Resources from the WordPress community

Questions? @kingsidharth www.kingsidharth.com [email protected] 22-year old Designer & Entrepreneur @
Instamojo Been taught by WordPress since high-school

A Crash Course in Typography — WordCamp Baroda 2014

A Crash Course in Typography — WordCamp Baroda 2014

King Sidharth

More Decks by King Sidharth

Other Decks in Design

Featured

Transcript

g A Crash Course ! Typography by @kingsidharth for WordCamp

More than 90%* of the communication on the web is

A History of Typography from Print & Graphic Design +

Fonts have feelings too! Do you love me? Tell me

Shut up!

Shut up!

Shut up!

Classification ! Choosing a Typeface &

Classy, Authority, Timeless, and Old.

Sans-Serif New, Young, Fresh, Clean, and Modern

Geometric Humanist Display Slab Serif Fixed Width

! Basic Typesetting

Size Does Matter font-size: 16px; Keep it 14px to 18px

Alignment text-align: left; .alignleft .alignright .aligncenter

Repeat After Me: “I will not justify align the text!”

Words Per Line width & font-size Keep it 70-80 words

L e t t e r S p a c

Line Height line-height: 1.6em; Keep it between 1.5em to 1.6em

Web Specific Tech

@font-face Open Sans, Ubuntu, Roboto, etc. Use them wisely.

WordPress now uses Open Sans for the backend.

Responsive Typography

WordPress Specific Tools for styling & typography

.format-text .entry-title .entry-content Control styling of the of post/page headline(s)

Body Classes to Control Typography of Post/Page Types <body class=“

.single .entry-title { // Style Rules for Headline } !

is_single() //single post/page is_page() //single page is_post() //single post is_front_page()

.page, #page-<id> //single page .post, #post-<id> //single post .home //homepage!

Millions of Plugins, Themes & Resources from the WordPress community

Questions? @kingsidharth www.kingsidharth.com [email protected] 22-year old Designer & Entrepreneur @