- File Formats
Strong use of Typography Font can elevate your web design and add a level of professionalism to your site with best Designer Fonts, and on the same note, poor use of fonts can make your site and design appear shoddy and lacking in visual appeal, and not to mention, can make it hard to read. This can cause you to lose visitors as they click the “back” button in search for a more legible site for their information needed.
With so many fonts to choose from and a plethora of free font sites such as dafont.com and urbanfonts.com, where do you start and what fonts do you choose?
Your best bet is to always start with Google Fonts. They are open source, widely optimized and supported on the world wide web, and you can refer to them in inline code, or download and save them to your computer for use with other design and print projects to create consistency across your brand.
If you are developing your site with WordPress, there are easily used plugins for Google Fonts to make selecting your fonts inside page development with visual editors even more accessible. (Modern Fonts)
Before you begin to choose your fonts, first decide what style fonts you are in need of. Do you need a Header font and a font for body copy? And maybe you need a font for pull out quotes or testimonials on your page. A good rule of thumb is to use no more than three different fonts on a page and to remain consistent with the use of Cursive Fonts on all headers and paragraphs – for example, make sure all of your paragraphs are in the same font choice, and all H1s are the same font. If you are using standard CSS methods, this will be automatic.
There are two major categories for typefaces. Serif and Sans Serif. Serif Fonts are typefaces such as Times New Roman, that are embellished with tails or “serifs” on the ends of the letters. The most popular and widely used serif font is Times New Roman. Sans Serif fonts are fonts that do not have these embellishments. The most used sans serif font is Helvetica.
Serif fonts were considered more easily read until the shift from print to web took place. This is why most of the print books you have are written in a serif font and why you may now notice that most web pages, especially body copy, are now sans serif. Fonts like Times Roman can be hard to read on screen in small point sizes, but can be effective in uses as headers, accent fonts, and even pull out quotes. Here is a list of 10 Google Fonts for Web Design.
1. Arvo– Arvo is a mid weight serif font that can be used for headings or copy text.
2. Ultra– This is a super chunky Serif font useful for making a bold statement for headers and titles. Less is more with this font, but can be used successfully for Heading 1 and Heading 2 tags.
3. Volkhov– A great font for text, and a bit more of a fresh alternative instead of Times New Roman or Garamond Pro.
4. Raleway – An easily legible sans serif font that is wonderful to use for body text or headers.
5. Signika Negative– The Light 300 and Normal 400 wights of this font are perfect for all around use for body copy or headings.
6. Actor– A sans serif font with great spacing. legibility, and a flare on the Q tail.
7. Montserrat– is a fun take on a sans serif font with fun tails on the Qs and half cross marks on the capital Js.
8. Oswald– This font family, especially the Bold 700 is a great Google Font stand in for Futura Condensed Bold.
9. Special Elite– A casual feel typewriter like font. This font would be a good choice for headers used in conjunction with a sans serif font for body text.
10. Waiting for the Sunrise– Sometimes there is a need for a hand written effect on your site or design project. Give Waiting for the Sunrise a try, but do use it sparingly, as too much of a Handwritten Font can seem overdone. I also would not suggest using this as body text.
Visit www.Google.com/fonts and select the font you wish to download by clicking on “Add to Collection.” Once you have all the fonts you wish to download added to your collection, you can click the Down Arrow button at the top right located next to the link icon. This will give you the option to download all the fonts in your collection as a .zip file to your computer, and then you can install each font into your font library. You can also use the “Quick Use” function to insert a font into your website quickly and easily by pasting a line of code. (Headline Fonts)