Posted By

1man on 04/10/07


Tagged

css typography line-height


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

jonhenshaw
berkes
basicmagic
vali29
asturi
thinkcirca


CSS Line Height Example


 / Published in: CSS
 

URL: http://www.alistapart.com/articles/settingtypeontheweb

Example off ALA, pleasing typography layout for the web. Based on the grid system.

  1. /* Grid system for CSS typography ********************************************/
  2. /*The first thing we have to do is set a line-height for our grid. I’ve chosen a
  3. pretty standard base font size of 12 pixels, and set the line-height at 18
  4. pixels, which gives us a nice open leading of about 150%.*/
  5.  
  6. /*The pattern is pretty simple. Any time you add vertical space with a margin or
  7. padding, you need to add it in units of 18 pixels to maintain the baseline grid.
  8. You don’t always have to add it in one place, but you need to add it in pairs
  9. that add up to 18 pixels. For instance, you could set a top margin of 12 pixels
  10. and a bottom margin of 6 pixels.*/
  11.  
  12. * {/* don't use this in production, be more specific */
  13. padding: 0;
  14. margin: 0;
  15. }
  16. body {
  17. font-family:'Lucida Grande',Arial,sans-serif;
  18. font-size:12px;/* this is 100% */
  19. line-height:18px;/* gives a leading of 150% */
  20. }
  21. p,h1,h2,h3,ul {margin-left: 24px;}/* for nice display */
  22. p {
  23. margin-bottom: 18px;
  24. width: 400px;
  25. }
  26. h1 {
  27. font-size: 24px;
  28. line-height: 36px;
  29. margin-bottom: 18px;
  30. margin-top: 18px;/* for nice display */
  31. }
  32. h2 {
  33. font-size: 18px;
  34. line-height: 18px;
  35. margin-bottom: 18px;
  36. }
  37. h3 {
  38. font-size: 12px;
  39. line-height: 18px;
  40. }
  41. ul {
  42. margin-bottom: 18px;
  43. }

Report this snippet  

You need to login to post a comment.