advanced code snippet search

Posted By

eriksagen on 10/04/08


Tagged

css typography boilerplate


Versions (?)

Who likes this?

18 people have marked this snippet as a favorite

poGDI
eriksagen
bdhamilton
andyweb
monapdx
soumitrabhat
Bluewall
j4kp07
aleksanderek
jmiller
aleyst
bobbym245
ijasnijas
ljayz
dajocko
clac
ringo380
droopysignal


Typography.css

 / Published in: CSS
 

A good typographic foundation (originally from Boilerplate, uses reset.css).

Expand | Embed | Plain Text 
  1. /* -------------------------------------------------------------- 
  2.    Reset
  3. -------------------------------------------------------------- */
  4.  
  5. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
  6. body { line-height: 1.5; background: #fff; margin: 1.5em 0; }
  7. table { border-collapse: collapse; border-spacing: 0; }
  8. caption, th, td { text-align: left; font-weight:400; }
  9. blockquote:before, blockquote:after, q:before, q:after { content: ""; }
  10. blockquote, q { quotes: "" ""; }
  11. a img { border: none; }
  12. input,textarea { margin: 0; }
  13.  
  14. /* Removes Firefox imposed outline */
  15. a { outline: none; }
  16.  
  17. /* Clearing floats without extra markup - give the parent container the group class */
  18. .group:after {
  19.   content: ".";
  20.   display: block;
  21.   height: 0;
  22.   clear: both;
  23.   visibility: hidden;
  24. }
  25.  
  26. /* IE6 */
  27. * html .group { height: 1%; }
  28.  
  29. /*IE7 */
  30. .group { min-height: 1px; }
  31.  
  32. /* -------------------------------------------------------------- 
  33.    Typography
  34. -------------------------------------------------------------- */
  35.  
  36. /* This is where you set your desired font size. The line-heights 
  37.    and vertical margins are automatically calculated from this. 
  38.    The percentage is of 16px (0.75 * 16px = 12px). */
  39. body { font-size: 75%; }
  40.  
  41.  
  42. /* Default fonts and colors. */
  43. body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: Helvetica, Arial, sans-serif; }
  44.  
  45.  
  46. /* Headings
  47. -------------------------------------------------------------- */
  48.  
  49. h1,h2,h3,h4,h5,h6 { font-weight: bold; }
  50.  
  51. h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
  52. h2 { font-size: 2em; margin-bottom: 0.75em; }
  53. h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
  54. h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
  55. h5 { font-size: 1em; margin-bottom: 1.5em; }
  56. h6 { font-size: 1em; }
  57.  
  58.  
  59. /* Text elements
  60. -------------------------------------------------------------- */
  61.  
  62. p { margin: 0 0 1.5em; }
  63.  
  64. ul, ol { margin: 0 1.5em 1.5em 1.5em; }
  65. ul { list-style-type: circle; }
  66. ol { list-style-type: decimal; }
  67.  
  68. dl { margin: 0 0 1.5em 0; }
  69. dl dt { font-weight: bold; }
  70. dl dd { margin-left: 1.5em; }
  71.  
  72. abbr, acronym { border-bottom: 1px dotted #000; }
  73. address { margin-top: 1.5em; font-style: italic; }
  74. del { color: #000; }
  75.  
  76. a { color: #009; text-decoration: none; }
  77. a:hover { text-decoration: underline; }
  78.  
  79. blockquote { margin: 1.5em; }
  80. strong { font-weight: bold; }
  81. em, dfn { font-style: italic; }
  82. dfn { font-weight: bold; }
  83. pre, code { margin: 1.5em 0; white-space: pre; }
  84. pre, code, tt { font: 1em monospace; line-height: 1.5; } 
  85. tt { display: block; margin: 1.5em 0; line-height: 1.5; }
  86. span.amp { /* For better-looking ampersands */
  87.   font-family: Baskerville, Palatino, "Book Antiqua", serif;
  88.   font-style: italic;
  89. }

Report this snippet  

You need to login to post a comment.