In this section I will be documenting the changes made to the style.css document for the clutterlovers theme, simply writing the details of the alterations to each tag would be pointless (you probably have another theme and although most css files use the same tags there are always subtle differences, custom tags and so on. Later in the development I will be adding custom tags and functions – I will go into the nerdy details then…

typography on the internet is a tricky subject and much of what i say here is subjective and therefore cannot be taken as hard and fast. However, some “classical” typography rules can and should be applied.

  • NEVER mix too many fonts! 2 is company 3 is a crowd
  • Be SPARING with styles (bold, Italic, underline etc)
  • Use SIZE and COLOR to differentiate content
  • Be Sparing with SIZE and COLOR – Less is often More
  • Mixing SERIF and SANS SERIF fonts in a layout rarely leads to a harmonic design
  • COMIC SANS is NOT a FONT – it is not even an OPTION for a FONT :lol:
  • SMALL CAPS look Better at SMALL SIZES than CAPITALS (UPPERCASE)
  • CENTERED text is for ANNOUNCEMENTS only
  • RAINBOW text is so UGLY that I won´t even use it here to prove it!
  • DON`T BE  TOO HEAVY ON THE SHIFT/CAPS LOCK KEY!

Some rules for Internet typography can be added:

  • Always Define serif or sans-serif in your Tags as last value. example: “font-family: Arial, Helvetica, Sans-Serif” or “Times New Roman, Serif,”
  • Font size values can be in Pixels (px), the standard format. The classical Point (pt) (good for users who have Type1 postscript fonts installed with specially rendered anti-aliased screen fonts) and Ems (Em) useful for scaling fonts proportionally. You can use all of these together in a css file as long as you always specify at least one of them in each “Font” tag.
  • Use “System” Fonts (the standard OS fonts) for sizes smaller than 7 or 8 px and use px or x.xxem as value NOT pts
  • Letter Spacing can be useful if applied carefully – define using decimal values of Ems, i.e. 0.1 em
  • Usability and Readability are not the same thing. Use strict markup to enable web-specific usability aids “Hover” “Visited” are two good examples of usability aids in web design that you will see “Tagged” in css
  • Lists: Li, ul, oL etc. Lists are the perfect method for keeping posts tidy and homogenic they solve most of the problems encountered with layout inconsistencies in Blog and Web Design.
  • Size DOES matter and your Screen Resolution is the determining factor in wether a 6px bold headline looks “Neat and Tidy” or downright Illegible.
  • Text looks best in Black or White, check contrast between background color and (body) text
  • Headlines, Headers, Navigation can be aided by clever use of color and “Hover” tags
  • Too much text is boring and and tiring and will not be read, use of “teasers” “breadcrumbs” and “excerpts” together with image elements will make your posts more inviting.
  • Too much text is boring, and thats why I am going to stop here… and show some more progress with the clutterlovers css…

If anyone reading this would like a “founded typographical critique” send me the URL and I will try to help you out…

next post in “clutterlovers – the making of”… this blog is about to self destruct! delete, reinstall, restart…

wanna know more about the author...  countzeero - the self proclaimed EvilGenius™ behind OWN INDUSTRIES. Pixel Penetration and Code Cruelty are but two of his deadly skills. In his free time he likes to run too many blogs and twitter incessantly...