Canva: Free Graphics Tool for Marketing, Publicity
Let me inform you that I am not a designer by trade and I don't have any design sense, either. But by luck I have to design forms in my company. But I do not get the professional look that you see on websites. I want to know which fonts designers use for:
- Title (say, the title of a blog post)
Also what should the sizes be?
- 1 If it's a movie website, the only font you are allowed to use is Trajan.
- 3 That has a thousand answers, depends on the branding for the site. Generally, you should only use web-safe fonts, that is, the font families that should be present on all browsers. See: en.wikipedia.org/wiki/Web_fonts
- 1 Use Comic Sans wherever you can ;-)
- 2 @acme - don't even joke about that... someone will take you seriously. :p
Whatever site or resource you turn to, the two key terms you'll want to learn more about are body type and display type.
In your case, the description is likely an example of body type -- a consistent, easy-to-read design -- and the title probably calls for display type -- something designed to grab your attention first, like a big headline in a newspaper.
Check out http://typekit.com/libraries/full?tags=display. These are all fonts designed to scream at you. On a poster from 20 feet away, you'd notice them. But you wouldn't want to read a whole blog entry using these.
Now look at http://typekit.com/libraries/full?tags=paragraph. These are examples of body type. They're all clean and easy to read for longer stretches of text, but don't draw much attention for titles and headlines.
Just within the past year or two, there are more options than ever for using fonts on Web sites, like the
@font-face property @yetanothercoder mentions in his comment or the Typekit site I mentioned above. Even one of their free accounts enables you to have dozens of typefaces embedded in your site. The user doesn't need to have any of these particular fonts installed -- a script in the head of your page calls to Typekit's server, retrieves it, and embeds it. You can even control these fonts with CSS.
Like most new Web toys, if you decide to use these options, you'll want to make sure you have some fallbacks for older browsers that don't support them. Basically, let the
font-family rule cascade down to a font you're fairly sure everyone has, like 'arial, helvetica'.
That said, and without knowing the tone of what you're designing, a few examples of solid body fonts:
- Georgia (pretty common, but handsome)
- Minion Pro
- Droid Serif (could also be used for display at large sizes)
And some nice display fonts:
- Franklin Gothic Condensed (There are many, many versions of Franklin, with subtle flavors ranging from body to display. Depending on the need, you could design a whole site just using the Franklin family.)
- FF Meta Web Pro
Hope this is helpful. Have fun.
Why don't you just look at the HTML source of a page on a website that you like? It'll tell you what the font is (unless rendered as a static image but that seems unlikely for blog post)
Designers use all kinds of fonts, often forgetting that most of them can't be used online.
Here's the safe list of fonts.
- And Google Font Lab : code.google.com/webfonts/preview#font-family=Allan
- @diodeus: are you entirely right? developer.mozilla.org/en/css/@font-face
- @yetanothercoder Unfortunately, support for @font-face is not 100%, so it's always good to have a safe font specified as a backup.