Simple CSS Tricks to Greatly Improve Site Typography
Posted: September 4th, 2009 | Author: Kurt | Filed under: Web Design | 13 Comments »
When creating a minimalist or simple website design, typography plays a key role in adding contrast and interest that would normally be done with images. Because of that, it’s essential that the typography looks professional and is well-tuned with the rest of the design. Here are a few CSS tips to make sure you get it right.
Use a Proper Typographic Scale
A typographic scale ensures that all of the type follows a predictable size pattern, improving readability for the user. An easy way to do this in CSS is to set all of the font on the page to a size of 18px, and then adjust headers and paragraphs with the em measurement with equal space in between. Here is an example of that:
body { font-size: 18px; }
h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }
Make Sure the Leading is Not Too Small or Too Large
Leading refers to the space between lines of font. It’s what gives the oompf to double spacing when you type papers for class. When the leading is too small, text looks bunched together, and when it is too large, it’s unstylish and hard to read. A good rule of thumb is to set the leading about 2 to 5 points larger than the size of the font.
Emphasize in a Non-Distracting Way
When you emphasize text, you want to do so in a way that helps and does not distract the reader. Sometimes, things like bolding, small-caps, and italics all at the same time make the font too hard to read. Generally, it’s best to stick to a simple italicized script for clean and readable design.
Creating Typographic Contrast
Use elements like size, typeface, color, casing, and weight to add interest to your design. The Web Designer Wall provides a wonderful encyclopedia of effects designers can use.
Simple CSS Tricks to Greatly Improve Site Typography…
When creating a minimalist or simple website design, typography plays a key role in adding contrast and interest that would normally be done with images. Because of that, it’s essential that the typography looks professional and is well-tuned with the …
Nice.
Nice ..
Thanks ..!!
I’m diving into typography right now and i now think basic typo knowledge is something every webdesigner should know… Thanks for this article!
[...] Cherrysave simple web designs blog + framework development + social media and seo Skip to content ArchiveContact « Simple CSS Tricks to Greatly Improve Site Typography [...]
[...] Design articles from which I learned new, better or alternative ways to do things 25 Incredibly Useful CSS Tricks You Should Know 35 Excellent Wireframing Resources The Ultimate Guide to Version Control for Designers Backgrounds In CSS: Everything You Need To Know The Definitive Guide to About Me Pages How to Create a Valid Non-Javascript Lightbox Simple CSS Tricks to Greatly Improve Site Typography [...]
The header definition is good, but defining the base size at 18px is IMHO totally wrong!
You just ignoring the fact that the dot density of screens (DPI) vary big time.
Mac default 72dpi, Windows default 96dpi (or 120dpi for large font), …
Using pt is way better.
OK, that will not work with a pixel based design, but that’s anyway outdated…
I’ve always been big fan of CSS and try to use it extensively. It has almost always worked fine for me. But sorry I couldn’t find any interest CSS tips in this post. However, the header definition was good.
[...] Simple CSS Tricks to Greatly Improve Site Typography [...]
[...] Need To Know The Definitive Guide to About Me Pages How to Create a Valid Non-Javascript Lightbox Simple CSS Tricks to Greatly Improve Site Typography 3 Easy and Fast CSS Techniques for Faux Image Cropping 7 Rules for Mixing Multiple Fonts in Good [...]
[...] This one is really cool. It all about how to improve website typography: Website Type [...]
Oh, good joke) What has four legs, is big, green, furry, and if it fell out of a tree would kill you? A pool table.
___________________________
–/ [url=http://cials.viacrarx.info/site_map.html]cials herbal[/url] /–
Now THAT’s exactly what I’ve been looking for.
I’ve recently started giving Typography a lot more of my attention and there’s nothing like some simple guidelines to lean on to get started.