Stylish Content with Better Typography & CSS

Monday, March 26, 12

by Eric D. Fields / UX Director at HipHost

Stylish Content


Goals

• reevaluate the design of our site as it relates to our content

• empower you to start customizing your own content


When we talk about good web design…

• we empathize with the user…• … to make informed decisions…• … that lead to the best possible user

experience• we educate the client about the design

process


The Rules of Good Web Design

• present information clearly

• provide intuitive navigation

• make it easy on the eyes


The Results of Good Web Design

• site becomes a destination

• keeps the user on the site

• increased virality

• helps establish trust & authority


The Results of Stylish Web Design

• get noticed

• builds or reinforces a brand

• creates an emotional response


What should we style?

• banner?

• background?

• sidebar?

• images?


What did the users come for?

CONTENT


CONTENT=

TYPOGRAPHY


What is typography?

The style and appearance of text.

And why should I care?


What is typography?



composition, attitude, look, feel


What is typography?



shape, color, bare attributes


Slab serif, Script, Blackletter, Monospaced, Hand, Decorative

Weight

Width

Typographic Elements

LetterformsSans serif, Serif,



Words



Words & Phrases



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Words & Phrases Come Together (At Long Last!)


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

in reprehenderit in voluptate velit esse cillum dolore eu fugiat

nulla pariatur. Excepteur sint occaecat cupidatat non proident,

sunt in culpa qui of!cia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque

ipsa quae ab illo inventore veritatis et quasi architecto beatae

vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia

voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur

magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit

amet, consectetur, adipisci velit, sed quia non numquam eius

modi tempora incidunt ut labore et dolore magnam aliquam

quaerat voluptatem. Ut enim ad minima veniam, quis nostrum

exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid

ex ea commodi consequatur?



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed

do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis

aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat

cupidatat non proident, sunt in culpa qui officia deserunt

mollit anim id est laborum.


accusantium doloremque laudantium, totam rem aperiam,

eaque ipsa quae ab illo inventore veritatis et quasi architecto

beatae vitae dicta sunt explicabo. Neque porro quisquam est,

qui dolorem ipsum quia dolor sit amet, consectetur, adipisci

velit, sed quia non numquam eius modi tempora incidunt ut

labore et dolore magnam aliquam quaerat voluptatem. Ut

enim ad…


“Nemo enim ipsam voluptatem quia

voluptas sit aspernatur aut odit aut fugit,

sed quia consequuntur magni eos qui”




enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi

ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat

non proident, sunt in culpa qui of!cia deserunt mollit anim id est

laborum.


Sed ut perspiciatis unde omnis iste natus error sit Voluptatem accusantium doloremque laudantium, totam rem

aperiam. Eaque ipsa quae ab illo inventore veritatis et quasi

architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam

voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

consequuntur magni dolores eos qui ratione voluptatem sequi

nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

consectetur, adipisci velit, sed quia non numquam eius modi

tempora incidunt ut labore et dolore magnam aliquam…




enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat

cupidatat non proident, sunt in culpa qui officia deserunt mollit

anim id est laborum.


accusantium doloremque laudantium, totam rem aperiam,

eaque ipsa quae ab illo inventore veritatis et quasi architecto

beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut

odit aut fugit, sed quia consequuntur magni dolores eos qui

ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit

amet, consectetur, adipisci velit, sed quia non numquam eius

modi tempora incidunt ut labore et dolore magnam aliquam…


Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?


Good typography is readable

• high contrast

• line-height: 1.5

• left-aligned (never justified)

• ~ 80 characters per line

• 16px font size


Stylish typography is emotional

• Strict color palette

• Mix serif headlines w/ sans-serif copy

• Headlines ~ 2x body copy size

• Embrace whitespace

• Custom fonts?!


Web font services

• TypeKit (http://typekit.com)

• Google Web Fonts (http://www.google.com/webfonts)

• Fonts.com (http://webfonts.fonts.com/en-US)

• H&FJ (http://www.typography.com/ — soon… $$$)


http://typekit.com

http://typekit.com

http://www.google.com/webfonts

http://www.google.com/webfonts

http://webfonts.fonts.com/en-US

http://webfonts.fonts.com/en-US

http://www.typography.com

http://www.typography.com

kottke.org barackobama.com


So how do we style our blog?

CSS


CASCADINGSTYLESHEETS


CSS is 1/3 of your (or most) websites

• HTML – content

• JavaScript – behavior

• CSS – presentation


How CSS Works

• Every page of your blog links back to one or many stylesheets

(*.CSS files)

• Within the CSS file, selectors describe elements in the

HTML

• Properties are defined within selectors that describe

the presentation elements

• The browser matches elements based on CSS selectors

and renders them according to defined properties


CSS Selectors Look Like

• h1 (tag-based selector)

• strong (tag-based selector)

• .gallery (class-based selector)

• .post p (class-based selector)

• #footer (id-based selector)

• #main-content li a (id-based selector)


CSS Properties Look Like

• font-size: 24px;

• margin-top: 12px;

• padding-left: 80px;

• color : #9988ac;

• text-decoration: underline;

• font-weight: bold;


CSS Looks Like…

h1 { font-size: 24px; font-weight: bold; color: red; margin-bottom: 11px;}

.special-paragraph { font-style: italic border-top: 1px solid #9999AC; padding-top: 10px; padding-bottom: 10px;}

.entry-header .comments-link a { background: #EEE url(images/comment-bubble.png) no-repeat; color: #666; font-size: 13px; font-weight: normal; line-height: 35px; overflow: hidden; padding: 0 0 0; position: absolute; top: 1.5em; right: 0; text-align: center; text-decoration: none; width: 43px; height: 36px;}


Here we go!


Thank You! Any questions?


Stylish Content with Better Typography & CSS

Design

Transcript of Stylish Content with Better Typography & CSS