August 9, 2013
Notes from a Website Janitor: How to Clean up Fonts and Alignment
I feel a bit like a janitor when I start working on websites created by other people. Sure, there are a lot of good ideas behind some of the design concepts… great creative impulses. But one of the main things I do is to go back to basics by making sites more tidy, tight and follow some kind of a grid layout.
You can help your business or organization’s image online by cleaning up the presentation of information. It makes it much easier to read and conveys a more professional image.
This is not only good for web designers, but for the layperson as well. Frequently laypeople create content for websites on blogs and announcements. And many create content for e-newsletters.
Clean up your fonts
Use one very readable font for the bulk of the text of your document or web page, and perhaps one or two fonts for accent/section title text.
Sans serif fonts tend to look good for article text on most sites with the possible exception of news and literary sites. Serif fonts are psychologically associated with news and literature, so are stylistically appropriate on those sites (think New York Times and New Yorker).
- Don’t change font mid-paragraph.
- Don’t bold or italicize often.
- Do not underline words unless they are links.
- Think “text book” for presentation. Remember your old school textbooks and how information was presented in sections with headings and subheadings? This is great for websites. Think of how they varied font usage for a good guideline.
Use orderly alignment
You know the saying about having to know the rules before you can break them? It tends to apply when considering the formatting of text alignment. Unless you have a very good reason to do otherwise, use left-aligned paragraphs. It is more difficult in most cases to quickly read center-aligned text. You can do some center-aligned text, but it should be the rare exception in your web document’s layout.
There’s more to alignment than just sticking to left-aligned text, though. One of the main things we do when tightening up designs is to match the left edge of main sections together. For instance, we frequently align the left edge of a site’s logo (typically located on the upper left of the web page) with the left edge of the main menu text and the left edge of the web page text content. Take a look at the site I developed for the Northeast Ohio Sierra Club as an example:
So remember to align your text in an orderly way and be judicious with your use of fonts. You will give your website a much more professional look and feel!
Lakenetwork is a family-owned business providing website design and development for companies, professionals and organizations in the Cleveland, Ohio area and beyond. We specialize in providing the most cost-effective and appropriate solutions for clients’ online needs. We are located in Eastlake, Ohio.