Webmaster's tutorial: Analyzing website Organizing website Developing website Implementing website Maintaning website
Welcome to the Web - Rocketface(R) Workshop Webmaster's Tutorial - "How to Design a Website" Rocketface(R) Home - Welcome to the WebHow to Design a Website - Webmaster's Tutorial StartRocketface(R) Webmaster's Workshop
Rocketface®Workshop Webmaster's Tutorial Index Webmasters Article Archive Sitemap Privacy About
Rocketface®: Webmater's Workshop
  • How to Design a Website
  • About Domain Names
  • About Web Hosts
  • Free Web Hosts
  • Private Web Hosts
  • Types of Websites
  • Building a Website
  • Analyze Website
  • Analyze Audience
  • Analyze Content
  • Website Design Tips
  • Website Journal
  • Effective Communication
  • Target Audience
  • Demographics
  • Website Goals
  • Organize Website
  • Website Basic Layout
  • Webpage Design
  • Website Navigation
  • Website Structure
  • Website Sections
  • Website Theme
  • Webpage Layout
  • Website Content
  • HTML Editors
  • White Space
  • Develop Website
  • Sitemap Construction
  • Webpage Construction
  • Website Assembly
  • Website Construction
  • Typography - Fonts
  • Typography - Style
  • Typography - Layout
  • Website Graphics
  • Website Templates
  • Implement Website
  • FTP Website
  • Fine Tuning Website
  • Upload Organization
  • Ftp Checklist
  • User Interaction
  • Maintain Website
  • Website Promotion
  • Marketing Website
  • Viral Marketing
  • Content
  • Product Sales
  • Affiliate Programs
  • OnLine Services
  • Optimize Website
  • Keywords
  • The SEO Process
  • Website Traffic Analysis
  • Increasing Website Traffic
  • Links Tracking
  • Link Baiting
  • ROR RSS Sitemap Generator
  • Summary
  • Resources
  • Types of websites
  • Hex codes
  • Toolbox for webmasters
  • Free template downloads
  • Optimize your website
  • Resources
  • Glossary
  • Newsletter
  • Feedback
  • Main Site Index
  • Article Archive


  • Something a little different
    XtraAstrology - Exploring the arcane
    moonGROW - Moon phase gardening




    Typography and Website Design - Style

    Typography on the Web

    Style

    Once you have decided on the "appearance" of web page text; what about the "style" of the text? Style refers to -uppercase, bold, italic, underlined, subscript and superscript text as well as font color and size.

    A good rule of thumb is to avoid using uppercase text as much as possible; it's difficult to read when you are skimming a page. (Plus, on the Internet, capital letters symbolize "SHOUTING"!) Save the bold, italics and underlining for very important text and use it in small doses.

    It is best to use a sans-serif font for all of your website text styles. This not only provides easy reading for your website visitor but also gives an appearance of uniformity and professionalism to the site.


    Font Color vs Background

    The color of font you use for the bulk of your pages should be one that contrasts sharply with the background for easy readability. If the background is too colorful or dark, use a graphics program to lighten it.

    The example given below shows the need to contrast your text with it's background. In order for your web text to be easily readable you must consider the web page background vs the text color. Do they contrast effectively? Are your visitors going to be able to read your content without trouble?

    Example of web page background graphics vs text color and readability.

    Shown is an example of web page background graphics vs text color and readability.

    Font Size

    Font size is a matter of preference and is often determined by the type of web site you have. However, it's usually pretty easy to spot a web site by someone new to the Internet ... the font size is very large and is the same for everything. This is because most of us are conditioned to use a size 12pt font for creating printed correspondence and we transfer that habit to a web site. To compare, A 10pt font is used for these pages with a larger 12pt for headers.

    Here is what a 12pt font looks like on the web. You can imagine how fast this would fill up a web page. Plus, text this large is unnecessary on the web, except as headers.

    Rather than using bold, italics or underlining, a slightly larger or different colored font can call attention to important information. And smaller text, as in the links at the bottom of this page, let the reader know this is something different from the rest of the web page.


    Avoid harsh font colors

    Don't get carried away with a lot of different text colors; too many and a web site can take on a circus-like appearance.

    The colors red and yellow will draw the eye's attention, but they also tire the eyes. So use these colors sparingly - just to emphasize something you really want your visitors to see.

    A lot of text in either red or yellow, and your visitors will move on not even realizing it's because the color has tired their eyes.

    Designing Web Pages

    Designing Web Pages
    Designing good webpages begins with good webpage layout. So what do you want on this most important first screen?
    Professional Webpage Layout
    Examining the methods of professional webpage layout. The individual pages in your website must have a layout that allows the visitor to find out as much as possible about your webpage at a glance.
    All About Design Principles and Elements
    Basic website design elements to consider. A truly shocking number of web designers are unfamiliar with the basic principles and elements of design.
    Designing your Homepage
    Believe me, you want your visitors to stay as long as possible. This is the only way your site is going to succeed. Your site must be interesting, persuading, and easy to navigate.
    The Best Page Layout and Design for Content Websites
    To understand which layouts work you only need to look at the industry gorillas. These are the online content publishers who have been around for years, and who have tested just about every layout combination.
    Writing for the Web
    Writing for the Web is very different from traditional writing. The way website visitors read Web copy is unique and you must adjust your writing style to be effective.
    An Easy Way to Choose Attractive Color Combinations
    Lots of people struggle to come up with attractive color combinations when designing logos, banners or web sites. So, here's an easy technique that only takes a few minutes.
    Professional Graphics
    Graphic design is an intimidating subject for many Internet entrepreneurs. However, most of us must learn some basic design techniques to avoid the high costs of hiring a professional graphics designer.
    9 Ways to Make Your Web Site Look Great
    Learn how to design a website that gets attention every time. Avoid the mistakes most people making when creating their first web site. Take home some tricks that even the most advanced designers will enjoy.
    Selection of Web Templates
    An important part of website designing is selection of web templates. Here are a few points which will help you select the best web template for your website.
    Creating a Basic Web Design Template
    A "template" is simply a design format which you can apply to all (or most) of the pages in your web site.
    Website Optimization - Optimizing your websiteMarketing Website - Marketing your websiteWebsite Managment - Managing your websiteWebsite Design - Designing your websiteRocketface(R) Webmaster's Article Archives



    Back Next



    Copyright© 1999 - 2010
    Rocketface® Graphics
    Rocketface® Workshop Analyze Organize Develop Implement Maintain Site Map Index