Friday, March 11, 2011

CSS: CSS Typography: Techniques and Best Practices

http://sixrevisions.com/css/css-typography-02/#more-5033

Just include a copy of the font’s file on your web server and use the @font-face rule in your CSS code as follows:

@font-face {
  font-family: CurlzMTRegular;
  src: url(fonts/CurlzMTRegular.eot);
}

Then just use the font-family declared above with your CSS:

h1, h2, h3, h4, h5, h6 {
  /* Always use a font stack, even with custom web fonts! */
  font-family: CurlzMTRegular, Helvetica, Arial, sans-serif;
}



The concept of vertical rhythm is simple: Line heights, margins, and padding should all be equal or within even proportion.

Here’s an example:

p, ol, ul, blockquote, pre, code {
  line-height: 18px;
  margin-bottom 18px;
  /* 1.5em provides good vertical spacing ( = 150% of the font-size) */
  line-height: 1.5em;
  margin-bottom: 1.5em;
}


CSS3 Text Shadows:

p {
  text-shadow: 1px 1px 1px #000;
}


To create inset text, you can use negative values as such:

h1  {
  /* Use negative offsets to create inset text. */
  text-shadow: #000 -1px -1px 0;
}


No comments:

Post a Comment