Styling Text


Here's the process of styling text in HTML web pages:


  1. Insert the basic standard HTML tags: <html>, <head>, <title> and <body>
  2. Layout your web page using <div> tags
  3. Go to the body section and insert all the text content
  4. Add <h1> </h1> ….  <h6> </h6> for headers
  5. Add <p> </p> for paragraphs
  6. Separate the lines using <br /> if needed
  7. Create lists if necessary
  8. Add highlights using: <b>, <i> and <u> tags
  9.  Use CSS to format styling (change of color, alignment, font size, etc.)


NOTE: HTML language is to present text; not to style it. Cascading Style Sheets (CSS) is the language for styling text and other page elements.



Typography Rules


Here are some basic typography rules to help you with styling text.


  • Use CSS to style text and avoid using the HTML <font> tag
  • Use web safe fonts or web fonts like Google Fonts
  • Be consistent in keeping one text style for the entire website
  • Mostly use sans-serif font faces for the body text as it has a better read
  • You may use serif fonts for the headings
  • Limit the text color to 2-3 colors
  • Limit the text size to 2-3 sizes
  • Show a clear hierarchy by using larger font size for the headers, medium size for sub headers and regular size for the body text.
  • Use <h> tags for headers
  • Use <p> for paragraphs (paragraph: two or more lines)
  • Use bold, italic, underline and color to high light a portion of text
  • Create good contrast between text and background colors. Black text on white background has the highest contrast and the best readability.
  • Don’t use smaller font size than the default size



Buy "Digest Web Design" PDF Book


All the information on this website is also provided in a PDF book for only $30.
Click here to buy.



<<    Previous Page                                                                    Next Page    >>