Bloggerrific » font style http://www.davidjrush.com David J. Rush is a web designer and usability consultant in Pittsburgh who freelances and blogs about anything web related. Thu, 05 Jan 2012 02:50:29 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS – Controlling Copy aka Text http://www.davidjrush.com/blog/2008/12/css-controlling-copy-aka-text/ http://www.davidjrush.com/blog/2008/12/css-controlling-copy-aka-text/#comments Wed, 31 Dec 2008 15:19:00 +0000 David http://www.davidjrush.com/blog/?p=9 In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. In the last post, Setting Up Your First External CSS File, I discussed generic tags you should define right away in your main CSS file. This time around, for you beginners out there, I’m going to write specifically about all the different options you have for controlling the look of text in your website (or as you should call it, “copy”).

When writing your CSS files, you should always define your standard tags (as discussed in Setting Up Your First External CSS File). Included in that list are your copy tags. Copy tags include anything that can define the style of your copy. Most notably is the <p> tag. You also have <a> for links and <h1>, <h2>, <h3>, et cetera for headers. You also may want to consider defining the generic style for copy in your <body> tag and because of cross browser compatibility issues with Internet Explorer 6, your <div> tags. You see, if you define what you want all your copy to look like in your body tag, say font-size, font-family, color, et cetera, then IE6 will not apply this to your copy if any other tags interfere with it. So when you define your generic tag styles, it would be a safe move to define your copy style in your body, div, and p tag, and if you want to be even safer, your html tag as well!

So here are your options for defining the look of your copy in your CSS file (as always, w3schools is a great source for all of this):

  • font-family: times, georgia, serif;
    you can list one font name, multiple with commas, or a generic name
  • font-size: 14px;
    you can use px, em, %, or a size such as small
  • font-style: normal;
    normal, italic, or oblique
  • font-variant: normal;
    normal or small-caps
  • font-weight: normal;
    normal, bold, or a scale from 100-900
  • color: #444444;
    color name or color hex code preceded by the pound sign
  • line-height: 16px;
    using a pixel size larger than your font-size will yield extra space between lines. This definition is actually a great hack for centering text vertically in a div. If your div is 100 pixels high and you have one line of text in it, set the line-height to 100px!
  • text-align: left;
    left, center, right, or justify

That is really the basics of what you need to know for your copy. You may also include background-color as something, especially if you want white text. But basically, there you have it, the best ways to control your copy!

You know, the best tool I’ve ever found for any web developer, beginner or not, is a firefox add-on called Web Developer. It allows you to do so many things, but right now, I am touting it because it allows you to edit the CSS of ANY website you are looking at! It is a great way to learn the ropes because you see changes instantly and accurately. Try it out! Until then, try to keep your copy clean.

]]> http://www.davidjrush.com/blog/2008/12/css-controlling-copy-aka-text/feed/ 0