css typography: contrast techniques, tutorials …...10 great tips for using twitter as a...
TRANSCRIPT
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
SPONSORS Advertise with us!
PSD to HTMLPremium Website Templates
Share it. Screencast.com.How much is your host paying you?
Track Time - Send Invoices OnlineFree + Royalty-Free Vectors
AJAX CSS DESIGN PHOTOSHOP TUTORIAL WORDPRESS more »
Sep 15 CSS Typography: ContrastTechniques, Tutorials and Best
Practices
The main advantage of elegant CSS typography lies in its ability to be both attractive and
improves the user experience. When chosen wisely and used carefully, it can be very
effective to support the overall design. There are many outstanding examples of how we
can do this, and below you will find some of the best ideas and tips when it comes to using
Posted in CSS , FONTS , TUTORIAL 69 comments »
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
Sexy Drop Down Menu w/ jQuery &CSSin TUTORIAL / 300
The Ultimate Ugly Showcase of CurrentGovernment Websitesin SHOWCASES / 295
50 Most Beautiful Icon Sets Created in2008in FREEBIE / 264
Ten Simple Rules for Choosing thePerfect CMS + Excellent Optionsin PHP / 258
Mastering Your WordPress ThemeHacks and Techniquesin WORDPRESS / 208
1000+ Free High Resolution Photoshop
POPULAR ARTICLES
3 Months Free WebhostingThe Smashing Book!
Fonts and typography in your CSS based sites.
1. Eight Seven Principles of TypographicContrastYou can direct the reader’s attention to important parts in your layout and at the same time
enhance the visual appearance by creating contrast. Here are different css properties for
common typographic effects.
Type Size
font-size
White Space
line-heights, letter-spacing,word-spacing
Typefaces
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
Brush Setsin PHOTOSHOP / 204
Discussing PHP Frameworks: What,When, Why and Which?in PHP / 200
40+ Absolutely Stylish & Creative Hand-picked Wallpapersin WALLPAPERS / 180
40+ Extremely Beautiful Icon SetsHand-picked from deviantARTin FREEBIE / 179
101 Techniques for a Powerful CMSusing WordPressin WORDPRESS / 177
40 (NEW) High-quality and Free IconSetsin FREEBIE / 174
45 Brilliant Examples of PhotoManipulation Artin PHOTOSHOP / 168
50+ Amazing Jquery Examples- Part1in JQUERY / 159
font-family
Case
text-transform
Style
text-decoration, font-style
Weight
font-weight
Color
color
Alignment
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
SMASHING NETWORK
Color Theory for Designers, Part 1: The Meaning of Color -smashingmagazine.com
30 Websites with Lovely Layout and Typography -thedesigncubicle.com
Political Characters Volume 2 – Free Icon Set -speckyboy.com
15 Blogs for WordPress Designers and Developers toFollow - designm.ag
10 Great Tips for Using Twitter as a Designer -sixrevisions.com
29 Avatar Movie Wallpapers And Navi Recreating Tutorials -1stwebdesigner.com
40 Insane Ice Sculptures - noupe.com
27 Free Wooden Badges – Social Icon Pack - tutorial9.net
12 Reasons You Shouldn’t Freelance - freelancefolder.com
Photoshop Variables: How to Import External PSD Smartly -onextrapixel.com
text-align, float
Typographic Contrast and the web
This article has reviewed the important principal of typographic contrast as presented in a
brochure written fifty years ago by the canadian typ[ographer Carl Dair. He presented seven
principals ranging from type size to the direction of type on a page. Though written for
people whose profession was print, Carl's words are equally a[pplicable in a medium he
never experienced which is web design.
Typographic Contrast and Flow
Here are seven basic methods on how you can create typographic contrast.
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
The Elements of Typographic Style
This website steps through Bringhurst’s working principles, explaining how to accomplish
each using techniques available in HTML and CSS. A practical guide to web typography!
5 Principles And Ideas Of Setting Type On The Web
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
Principles, rules and ideas for approaching Web typography decisions by Sean Hodge on
SmashingMagazine.
2. Common Typography Techniques withCSS
CSS Heading TypeHow to use headings in HTML
A great tutorial by Alen Grakalic of CSSGlobe explaing what is the meaning of headings,
how to use them and what are the "Don'ts" when using heading tags.
Making Headlines With CSS
With a dash of design, we can utilize CSS to stylize those Web page headers to catch the
reader’s eye and encourage them to read on.
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
h2
{
margin-bottom: 0;
padding: 25px .5em 25px 250px;
background-image: url(examples.png);
background-repeat: no-repeat;
color: #333;
background-color: #cf0;
}
h2:hover
{
background-color: #fc9;
background-image: url(examples.jpg);
background-repeat: no-repeat;
}
10 Examples of Beautiful CSS Typography and how they did it…
There are a lot of great sites out there that have beautiful Typography using only CSS,
however simply looking at them is only half of the picture. If you want to know what did they
do, and how/why does it result in beautiful type? Check out this interesting post.
#DATE{
font-size: 85%;
text-transform: uppercase;
letter-spacing: 1px;
color: #bbb;
font-size: 10px;
font-family: "Lucida Grande", Verdana, Helvetica, Arial,
sans-serif;
font-weight: 100; }
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
#HEADLINE{
font: bold 34px "Century Schoolbook", Georgia, Times, serif;
color: #333;
line-height: 90%;
margin: .2em 0 .4em 0;
letter-spacing: -2px;
}
#TAG{
color: #76879b;
font-size: 10px;
margin: 5px;
font-family: "Lucida Grande", Verdana, Helvetica, Arial,
sans-serif;
font-size: 11px;
}
Heading Style gallery
Want something a little more stylish for your content headings (h1,h2,…) than a different font
or color? Try one of the heading styles listed here to spruce up your content.
Creating Dropcaps Using CSSCSS Magazine Style Drop Cap
The Drop Cap can be close to the size of the title text or bigger. So you need to force the
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
first big letter to span about five lines.
Paragraphs in Web TypographyThe Paragraph in Web Typography & Design
Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing
the right paragraph style is one of the cornerstones of good typography. This is a brief
inquiry into paragraph style for the Web. You can also check their 12 Examples of
Paragraph Typography here.
/*
First line flush left
Subsequently two lead indent, no boundary, justified
*/
p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: justify;
}
p p {text-indent: 2.5em;
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
}
Sizing Text in CSSHow to Size Text in CSS
Ems can be tricky to work with, especially when nesting elements deeply, as it can be hard
to keep track of the maths. However, commenting your style sheets well and styling
elements from the body inwards can keep things easier to follow. Learn how to size nested
elements using the body as the starting point.
<style type="text/css">
body {
font-size:100%;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>–>
<style type="text/css">
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
body {
font-size:16px;
}
</style>
<!–<[endif]–>
Text Sizing
3. Advanced Typography techniquesAdvanced Typography techniques using CSS
There are still many rich typographic abilities of CSS that are not well documented. Here is
a great example of what you can do by combining and tweaking type using css. Checkout
the advanced css typography example page and look through the source code.
Anatomy
Gray's
h3.gr {advanced_type.htm... (line 54)
border-bottom:10px solid #CC0000;
color:#999999;
float:left;
font-family:Impact,Arial,Verdana;
font-size:500%;font-weight:100;
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
margin:0pt;
text-transform:uppercase;
}
h3.gr2 {advanced_type.htm... (line 55)
color:#999999;
float:left;
font-family:Impact,Arial,Verdana;
font-size:500%;
font-weight:100;
margin:25px 0pt;
position:relative;
text-transform:uppercase;
}
How To Use Any Font You Wish With FLIR
How to implement Facelift Image Replacement (or FLIR), an alternative to sIFR that does
not require Flash. View a demo here.
CSS StyleFun with CSS
Different examples of amazing Text styled with CSS.
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
4. How to Customize Typography with CSSFrameworksBluePrint CSS How to: Customizing Typography Baselines
BluePrint’s typography.css file sets up some very nice typography styles that create a
beautiful baseline grid. This post came in handy to show you how to configure Your Font-
Size and Baseline to your desired value.
YUI Fonts CSS
YUI Fonts CSS file offers cross-browser typographical normalization and control. Checkout
their examples section to see it in action.
5. CSS Typography Tools and WizardsCSSType
A simple tool that create the text CSS coding for you & lets you preview it as you do it!
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
Typetester
The Typetester is an online application for comparison of the fonts for the screen. Its
primary role is to make web designer’s life easier.
CSSTypeset
Coverts your wysiwyg text formatting to css...in real time
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
6. Great Typographic DesignLooking for sites that have great typographic design, check out these galleries.
Typesites
Typesites is a weekly look at sites that have great typographic design.
Typography For Headlines
A great collection of links to more than 100 headlines around the Web in a unique and
creative way.
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
15 September 2008
69 Responses, Add Comment +
Markus
Wow ! Exactly what I was looking for ! Thanks for putting this together in anice organized post.
Reply
Websites with Excellent CSS Typography
There are some websites out there that have managed to create outstanding web designs
through the use of typography. They are simple, clean and communicative. Have a look at
some of them.
This entry was posted on Monday, September 15th, 2008 at 4:41 am and is filed under CSS, Fonts,
TUTORIAL.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response,
or trackback from your own site.
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
15 September 2008
15 September 2008
15 September 2008
15 September 2008
15 September 2008
15 September 2008
Nick
As always, a great post. You may want to include information on sIFR3
Reply
Shazza
Pretty good article. I love the examples shown :)
Reply
Nathan Beck
Fantastic post Noura. Loads of bases covered, I often forget the importanceof Headers and the massive impact they can have.
Reply
Vladimir
Fantastic post! I was doing some mini research about web typography thispost will be definitely very useful.
Reply
Brandon Cox
Good resources and links, but I also get a bit lost in this article. There are alot of images, subheadings, and links and sometimes it’s hard to tell thedifference – good links, but your article itself is a bit hard to navigate. Maybea better use of topography would help.
Reply
Brandon Cox
I meant typography, not topography – like I said, I’m an idiot!
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
15 September 2008
15 September 2008
15 September 2008
15 September 2008
15 September 2008
Reply
Matt
Excellent resource, thanks!
Reply
Goobi
Nice writeup man. Will sure keep the points in mind.
Reply
Chad Mueller
Great article, I love typography on the web, it’s just fantastic. I can’t wait tosee what designers come up with next in this genre. Check out this link tosee some really great examples of typography used on the web.
http://inspiredology.com/web-typography-at-its-best/
Reply
Mike Smith
HOLY &#$^! Nice article with a lovely round up of typography information.THANK YOU :)
Reply
Web Design Adelaide
Another great read. Should keep me busy for a few days.thank you
Reply
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
15 September 2008
15 September 2008
15 September 2008
15 September 2008
15 September 2008
15 September 2008
Ed
Good roundup but the first few instances of the word “principals” should be“principles”.
Reply
Mark
Wow, that’s a nice cheat-sheet.. Bookmarked!
Reply
gigi
nice tips!How can i implement the CSS Magazine Style Drop Cap in my wordpresspost?
Reply
kuindzi
Thank. I am possible I shall translate it on Russian?
Reply
Alexis
Nice Resources. Bookmarked!
Reply
Noupe
Hello everyone,
Thank you for the comments! I’d like to address some of them:@Brandon Cox: This post has 6 main headings, below each one youwill find subheadings. I just want to keep the posts and tutorials
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
15 September 2008
15 September 2008
mentioned here to be more categorized and organized.
@Chad Mueller: Your post is shows a great taste of typographictweaks, thanks for sharing :)
@gigi:CSS Magazine Style Drop Cap uses inline style.Implementing drop caps in WordPress is easy. You can create aclass name for example “drop-cap” for the first letter in theparagraph and add the following in your style sheet.
.drop-cap{
border: 1px solid darkkhaki;
background: khaki none repeat scroll 0%;
margin-right: 6px;
margin-top: 5px;
float: left;
color: white;
-moz-background-clip: -moz-initial; -moz-
background-origin: -moz-initial; -moz-background-
inline-policy: -moz-initial; font-size: 80px;
line-height: 60px;
padding-top: 2px;
padding-right: 5px;
font-family: times;
}
Thanks @kuindzi: It would be great if you translate it to Russian, justadd a link to Noupe’s post and send me the link so i can add it atthe end of the post.
Reply
Action
Always good to refresh. I use a couple of these often.
Reply
Noupe
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
15 September 2008
15 September 2008
16 September 2008
17 September 2008
19 September 2008
20 September 2008
@gigi: Also there is a plug-in that can do this for you.I didn’t use it before but you can give it a try.http://wordpress.org/extend/plugins/drop-caps/
Reply
Fabryz
Nice article :)
Reply
Honour Chick
nice collection… will sure use as inspiration. :)
Reply
Sean
This post is golden. Thank you.
Reply
Dainis Graveris
You have done excellent work! Again! Amazing article You got here.
Reply
santhos web design
Great article, very usefull!
Reply
web design company
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
21 September 2008
24 September 2008
24 September 2008
25 September 2008
26 September 2008
some of the best ideas and tips when it comes to using Fonts andtypography in your CSS based sites
Reply
Jon
Wow, another great article, I’ve bookmarked it as it’s so thorough I think I’llbe oming back to it many times!
Thanks for all your work
Cheers, Jon
Reply
Anthony
Wow your pretty good. great article. keep it up
Reply
Anthony
I put the wrong web address before, but i would like to add that css is goingto be the only way we build websites. no more tables
Reply
blogsarticle
Great article, very usefull!
Reply
webmaster blog
thank you man
Reply
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
2 November 2008
5 November 2008
13 November 2008
Skracanie linków
FLIR is great thing. Very useful post. Delicioused.
Reply
virgil
Great post! very useful and informative
Reply
The Floating Frog
This is possibly the best post so far, thanks guys.
Reply
Trackbacks
JeremiahTolbert.com » Blog Archive » links for 2008-09-15
webeame.net
CSS Typography: Techniques, Tutorials and Best Practices |WhiteSandsDigital.com
CSS Typography: Contrast Techniques, Tutorials and Best Practices - MakeBetter Websites - Inspiration & Showcase for Quality Design and CSS Websites
CSS Typography: Contrast Techniques, Tutorials and Best Practices
CSS Typography: Contrast Techniques, Tutorials and Best Practices |POLPDESIGN
Seth Holladay » Links » links for 2008-09-16
Algunas de las mejores técnicas, prácticas y tutoriales sobre tipografía CSS »Cosas sencillas
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
Anthony Tartaglia » Blog Archive » links for 2008-09-16
Best Design Resources of September 2008 | CrazyLeaf Design Blog
Best Of Design - September
Antilogic Media » Blog Archive » Antilogic Media - Design, Technology, SEO,Online Marketing and more…
31 Useful Resources Specially For Designers To Discover The Best Of The WebIn September 2008 | Wordpress Blog Services
TrackBack Spam - Smart Spammers
CSS Typography: Contrast Techniques, Tutorials and Best Practices
31 enlaces de septiembre con recursos para diseñadores web | frogx.three
designerly » Blog Archive » Type, Contrast and CSS : Best Practices
Webwichtel #1 TYPOGRAPHIE | kreativemonster
50+ Must Read Web Design for ROI, Usability and SEO Articles | SEOptimise
CSS Resources
50+ Must Read Web Design for ROI, Usability and SEO Articles | Last 24 hoursnews website
CSS Resources
CaoInteractive Blog | Graphic & Web Design » Blog Archive » Mastering CSSCoding: Getting Started
??????? » [Web] ????
Become a CSS Expert, 250+ Resources | Amazing and Inspiring Design
Chilesabe » 84 tips CSS y Recursos
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
CSS CODING For Designers « Prasadsambari’s Blog
Webtint » Typography in CSS2 and CSS3
Mastering CSS Coding: Getting Started - Smashing Magazine
Must Read: 50+ Web Design for ROI, Usability and SEO Articles | Ghosts-IT
Dream of space » 84?CSS???????
250+?????????CSS?? - ????????
CSS ???? « ????
Mastering CSS Coding: Getting Started « Web Tutorials
CSS Typography: Contrast Techniques, Tutorials and Best Practices | ThemeCenter
Leave a Reply
Comments are moderated – and rel="nofollow" is in use. Please no link dropping, nokeywords or domains as names; do not spam, and do not advertise!
Name (required)
Mail (will not be published) (required)
Website
CSS Typography: Contrast Techniques, Tutorials and Best Practices - Noupe
http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html[28.01.2010 14:06:16]
/ /Noupe Links
About
Contact Us
Archive
Publishing Policy
Subscribe
RSS Feed
Email Subscription
News RSS
Smashing Forum Dr. Web (.de) Smashing Magazine
Smashing Jobs Smashing Book
Noupe Friends
© 2009-2010 Smashing Media GmbH