Over the last few years, the possibilities for using type on the web have expanded enormously. In the bad old days of the web, designers were restricted to a few ‘web safe’ fonts, which meant everything looked pretty much the same, or using images to replace the type — a clunky solution that caused problems for the reader and technical problems in the browser. Nowadays, though, you can access an astonishing array of professional typefaces for use on your sites, bringing the aesthetics of print design to the web.
Since around 2010, widespread support of @font-face in all the major browsers, plus a new web open font format, WOFF, has led to a technical revolution and the rise of a number of web font hosting services. These companies allow users to pay a subscription to host an enormous range of web fonts on their website. Popular services include Typekit, Fontdeck,WebINKand Fonts.com.
Here 8 tips to choose and use effective font for your website:
1. Be selective
Pick a typeface that is appropriate for your content (read it, and know your font through and through); appropriate for its context (use text faces for body copy, and so on); and web-ready (both properly licensed, and optimised for the medium).
2.Choosing font colors
The W3C, which all designers and developers turn to for current web standards, states “a contrast ratio of 3:1 is the minimum level recommended by [ISO-9241–3] and [ANSI-HFES-100–1988] for standard text and vision.” Have no idea how to find a color to fit those requirements? Try this online tool.
3.Fonts that are easier to read
A sans serif font is easier to read online, while a serif font is easier to read in hard-copy print and in headlines. If you’re worried about readability, also pay attention to your white space. The judicious use of white space, even on the most content-rich pages, can keep text areas clean and contained. Below is where Reader’s Digest tested different version of their logo.
4.Choose the Size
As a general rule, designers like to set their body copy at the very least at 12px. Most, however, choose a larger size like 14px, which is even better for readability. Font-sizing is really quite easy to decide on for body copy, but it’s the titles that start to get complicated.
How big should your titles be? It depends. In my observation and creation of websites, I’ve come to the conclusion that a title should only be as big as it needs to be. This means that you should try out different sizes until you find one that is just big enough to draw the attention you want to it, but no bigger, unless huge text is what you’re going for, in which case go right on ahead.
5.Using multiple fonts
You’re not necessarily bound to one font. In fact, mixing fonts can add dimension to your design. It can also help delineate different types of text. For example, all of the informational text can be a standard sans serif, quotes can be italicized sans serif, and titles can be a larger serif. If you decide to do this, use a discerning eye because it can easily become too busy and tacky. Also, keep your choices uniform and consistent. For instance, make sure all of your text links are of the same font (underlining them is pretty standard) to communicate that “this is what a link looks like on my site.” Here are some good examples of well-mixed fonts.
it is important that you do not just specify a single font, even if it is a font that you think that most people have, like the ubiquitous “Arial” font. If your visitor uses a different type of computer, such as a non-Windows computer, even fonts like Arial may not be available.
Cascading Style Sheets, which is the underlying technology used by a web page to control its appearance, allow for web designers to specify a list of fonts to be used on a particular page. If the first font in that list is not available, the browser will try to use the next font specified, and so on.
For example, the fonts used in all of thesitewizard.com’s articles, including the one you are reading, are specified as follows:
font-family: Arial, Helvetica, sans-serif ;
6. Stay across browser updates
Bear in mind that browsers are constantly changing. For instance, the latest version of Firefox can now display advanced OpenType substitutions such as small caps, ligatures, swashes and different numerals. This means some options that are usually stripped out can now be included if required.
7.Match Your Design
Typography is not it’s own thing. It’s a part of web design just like any other. Type is important, yes, but you shouldn’t forget that is just part of what makes a web design great. You should design your type with the rest of your design in mind.
If you use a highly elaborate background texture, then maybe a nice serif would be good for your titles.
My point here is simple: Don’t forget the context. Design is a huge field, and today I’m just talking about one part of it. For a successful website design, all the parts have to mesh together successful. That’s the goal: to craft the experience that somebody will have on your website. You can’t do that with just type, or just color, or even just content!
8.Hierarchy
The nature of a title is big. It’s an important item on the page, so naturally it should be bigger, right? Yes and no. Yes, titles are generally bigger than other elements, but no, this is not the only way to draw attention to them. Color, weight, and placement are all equally important to establishing a clear visual hierarchy to your pages.
The key point to remember about visual hierarchy is that it’s all relative. Text on your site only has to stand out compared to the other text on your site. Take Wilson Miner’s site for example. His titles are quite small for how important they are, and are surprisingly close in size. However, his use of color distinguishes the most important title, and gives them more meaning.
9.Fonts for landing pages
Arial works best for fonts above size 12, sometimes for 11. Verdana for fonts 11 and under. On marketing items for OFIE’s, salesletters, etc., we will use Arial but sometimes for short, large headlines and for a more elegant look, we might use a Serif, something in the Times family, not bold and with some good line spacing. If the headline is long, we’ll stick with a Sans Serif.
Not sure the difference between a Serif and Sans Serif font?
For blogs, Medium, a pioneer in the big font, white space movement, is currently using Freight Text Pro, a derivation of Georgia.
Found on Techwebies
Top comments (0)