Posted By

jeremytarpley on 05/25/11


Tagged

css type typography


Versions (?)

Baseline typography for TAMU Library websites


 / Published in: CSS
 

URL: http://library.tamu.edu

css starting point for library websites - adds a uniform size, font weights and colors, etc for our websites

  1. /*****************************************************************************
  2. SITE TYPOGRAPHY ONLY!
  3. ******************************************************************************/
  4. html {
  5. font-size: 62.5%; /* equivalent to 10px (10px / 16px)*/
  6. font-family: Verdana, Lucida, Helvetica, Arial, sans-serif;
  7. font-style: normal;
  8. color: #535353;
  9. }
  10.  
  11. body {
  12. font-size: 1.1em;
  13. color: #535353;
  14. }
  15.  
  16. a {
  17. color: #1f5d85;
  18. text-decoration: none;
  19. outline: none;
  20. }
  21.  
  22. a:visited {
  23. color: purple;
  24. }
  25.  
  26. a:hover {
  27. text-decoration: underline;
  28. }
  29.  
  30. h1, h2, h3, h4, h5, h6 {
  31. margin: 0.75em 0 0.25em;
  32. color: #1a2830;
  33. font-family: Verdana, Lucida, Helvetica, Arial, sans-serif;
  34. font-weight: bold;
  35. }
  36.  
  37. cite, dfn, em {
  38. font-style: italic;
  39. }
  40.  
  41. strong, th {
  42. font-weight: bold;
  43. }
  44.  
  45. .documentFirstHeading {
  46. margin-left: 0;
  47. }
  48.  
  49. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  50. color: #1F5D85;
  51. text-decoration: none;
  52. }
  53.  
  54. h1 {
  55. font-size: 1.60em; /*17.6px*/
  56. margin-bottom: 30px;
  57. }
  58.  
  59. h2 {
  60. font-size: 1.30em; /*14.3px*/
  61. }
  62.  
  63. h3 {
  64. font-size: 1.15em; /*12.65px*/
  65. border-bottom: none;
  66. font-weight: bold;
  67. }
  68.  
  69. h4 {
  70. font-size: 1.05em; /*11.55px*/
  71. border-bottom: none;
  72. font-weight: bold;
  73. }
  74.  
  75. h5 {
  76.  
  77. font-size: 1em; /*11px*/
  78. border-bottom: none;
  79. font-weight: bold;
  80. }
  81.  
  82. h6 {
  83. font-size: .85em; /*9.35px*/
  84. border-bottom: none;
  85. font-weight: bold;
  86. }
  87.  
  88. abbr, acronym {
  89. color: #535353;
  90. }
  91.  
  92. dt {
  93. font-weight: bold;
  94. }
  95.  
  96. q {
  97. font-family: Baskerville, Georgia, serif;
  98. font-style: italic;
  99. font-size: 1.2em;
  100. }
  101.  
  102. label {
  103. font-weight: normal;
  104. }
  105.  
  106. blockquote {
  107. color: #535353;
  108. }
  109.  
  110. code, tt {
  111. font-family: Monaco, "Courier New", Courier, monospace;
  112. font-size: 1.2em;
  113. color: #535353;
  114. }
  115.  
  116. pre {
  117. font-family: Monaco, "Courier New", Courier, monospace;
  118. font-size: 1em;
  119. color: #535353;
  120. }
  121.  
  122. ins {
  123. color: green;
  124. text-decoration: none;
  125. }
  126.  
  127. del {
  128. text-decoration: line-through;
  129. }
  130.  
  131. #colophon h3 a, #colophon h3 a:active, #colophon h3 a:visited {
  132. color: #fff;
  133. font-size: 13px;
  134. }
  135.  
  136. /*****************************************************************************
  137. END SITE TYPOGRAPHY
  138. ******************************************************************************/

Report this snippet  

You need to login to post a comment.