Better Web Typography

The web never offered much for the typography world. Since the rise of the internet, there was never much emphasis on the typographic makeup of websites. Now there are hundreds of bloggers highlighting the importance of typography on the web. Here’s why they’re right, and what you can do to integrate original, organic typographic elements to compliment your design.

In the beginning, there was content. The internet was used as a tool to communicate written information faster and more effectively than any other method in history. There was no such thing as web usability and effective presentation for websites, something that’s seen as vital to increase readership as well as trust. People then realized that by presenting their website with strong organization and visuals, people are more inclined to read it. Basic marketing, right? Right. When it comes to society, the people that are more attractive get more attention, especially if they have a good sense of fashion. A person with a great personality will often be looked up to and seen as a role model. Similarly, a website that has a strong, original design will speak more than one without a sense of design. With captivating content, the personality of the website will really shine through.

Now it’s time to take the next step. A comedian wouldn’t yell at the audience in anger to deliver his/her jokes, because it would take away from the joke itself. Web typography is a tool that helps illuminate the feel, tone, and how one wants to present what they’re communicating through the internet. For example, it wouldn’t be in good taste to use Comic Sans for a law firm website (is it ever in good taste to use Comic Sans?!). A more conservative, elegant, and professional font on the other hand would.

The RichWP Frameworks helps giving your design a new edge by enhancing the typography and thus the personality of your site. You can do so by either directly including fonts from the Google Font Repository or by linking to fonts manually via the @font-face attributes.

Different browsers require different font file formats. If you are using the @font-face functionality of the theme instead of the Google Font API, you have make sure that you have your fonts available in all of these four formats:

  • TrueType Fonts (.ttf) » Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4+
  • EOT fonts (.eot) » Internet Explorer 4+
  • WOFF fonts (.woff) » Firefox 3.6+, Internet Explorer 9+, Chrome 5+
  • SVG fonts (.svg) » iPad and iPhone

A great selction of free @font-face kits which include all mentioned file formats can be found at Font Squirell. If you have your font only available in one format, you can convert it to the others using free tools such as the Online Font Converter.

About Robin

Robin is a web designer, WordPress admirer, coffee addict, and runs a web design blog. He's the front-man of Ocular Harmony.

Leave a Reply

Please use your real name instead of you company name or keyword spam.