• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 383
  • Last Modified:

Neew a good font and point size for easy reading

I would like my copy to be easily readable by 99% of those who try and read it, which means elderly people have to read it easily.  (I am thinking of my parents, who have a hard time with small print or funny fonts.)

I notice that paragraphs of text can become crowded and hard to read if the linies are too close to one another, so please include the line spacing to match an easy font and point size.

Thanks,
newbieweb
0
newbieweb
Asked:
newbieweb
  • 5
  • 4
  • 3
  • +2
2 Solutions
 
newbiewebAuthor Commented:
correction: "Need" a good font...
0
 
b0lsc0ttCommented:
newbieweb,

Some common web fonts are:

Verdana
Arial
Helvetica
sans-serif

In certain cases I have also liked Georgia or Garamond.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
ba272Commented:
I have been using this style as a first draft for paragraphs of text.

p {
    font-weight: normal;
    font-size:20px;
    font-family: Arial;
    text-decoration: none;
    color: #000000;
}

How is this for size and weight?  How would I slightly increase the spacing between lines?  And what colors are best for easy reading?

newbieweb
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
b0lsc0ttCommented:
I misread the "correction" comment and thought you want just font family now.  As far as readable font size I recommend that you don't use point as the unit.  Best results are found with pixels (px) or ems (em).  Usually I will use 11 or 12 px for a main body font or .8 em.  It is very readable and still looks like "body" text.

If you want to add to readability you could also increase the line spacing to 110%-150%.  That will add space between lines.

Let me know if you have any questions.

bol
0
 
newbiewebAuthor Commented:
bol,

Would you mind dressing up the attached CSS to include the changes you've suggested?

Thanks
0
 
b0lsc0ttCommented:
What attached CSS?  In an external CSS file or in the head of the html page it would look like this ...

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 110%;
}

All of those values can be inherited.  Is that what you had in mind?  Give it a try in your page.  If not please elaborate.  Ba272 provided an example in this same format and helped to draw my attention to the missing font-size in my first comment.

bol
0
 
newbiewebAuthor Commented:
Sorry, I meant this:

p {
    font-weight: normal;
    font-size:20px;
    font-family: Arial;
    text-decoration: none;
    color: #000000;
}

I think your example answered the question:)  But like any good answer, it creates more questions.

What does it mean to have font-family with more than one font?  

newbieweb
0
 
b0lsc0ttCommented:
That is actually a good thing to do, especially if your first choice is a platform specific or rare font.  You can specify additional fonts by separating them with a comma like I did.  Using my example, if my computer (i.e. browser) didn't have Verdana then it would try Arial next.  That way you can still have control over the type of font used.  The last entry is usually a very common one that still is similar to your first choice.  This is good so the browser doesn't have to choose and possibly use a font completely different from what you want.

Even though you can do this I don't recommend that you use really rare fonts on your page.  You want most visitors to see it just the way you want.  You can test the look of the other fonts by temporarily deleting the fonts before it.  If you wanted to see what Helvetica would look in my example then you would remove "Verdana, Arial," from the style.

Let me know if you have any other questions.

bol
0
 
newbiewebAuthor Commented:
bol,

how does your use of "body" reate to the body tag on the HTML page?  Does that set the default font for the page?  And would that preclude me from needing to use the <p> tag?

Thanks,

newbieweb

(the other guy was my post to you from my business EE account, ba272.  I learned then that I need to take special care to log off of the other one, etc.)
0
 
MagnussenCommented:
'Times New Roman' and similar fonts at 12pt are the fonts which are easiest to read (-- that's why they use them for books), and a line spacing of 1.5.
0
 
ba272Commented:
I also like 'Times New Roman' the best.

What font family is that?  What are some backup variants? Or does evrybody have 'Times New Roman'?

Thanks.
0
 
ba272Commented:
I did it again.

That post was from me, newbieweb
0
 
EsopoCommented:
>>'Times New Roman' and similar fonts at 12pt are the fonts which are easiest to read (-- that's why they use them for books)

That doesn't translate to the web. The low screen resolution makes for severely distorted strokes on serif fonts. Depending on the resolution screen your audience is using (and considering you want to be broad you should aim for lower resolutions), you should probably not use any serif fonts for your main body copy.

Verdana is a font that was designed to be used for the screen; as such, the distortion is minimal under bad resolution. If your main consideration is legibility then I recommend the use of Verdana as your face of choice.


About the size,
Never define a text size in pixels unless it is for a button or something with very few copy and only if you need to make sure it renders at a certain size for layout purposes (always try to avoid this situation though). Browsers allow for customer configuration and many users will make changes to their defult font.

For instance, I am on a laptop right now and normal webpage body copy looks too small for me, so I have setup my Firefox to render copy slightly larger. If you use pixel sizes to determine the size of your text, then Firefox renders it the size the page was designed in and not the size I configured, which is quite annoying.

You should always try to use font-size:medium for your page's copy, or font-size:small if you need it to be a bit smaller. These sizes are relative to the size chosen by the user.

Also, if you are concerned with giving your users optimum legibility then consider adding a javascript command to increase and decrease the size of the copy.

For usage of CSS font-size:
http://www.w3schools.com/css/pr_font_font-size.asp


About the line spacing,
More is better but up to a limit. Increased line spacing makes it easy to follow along a line of text, but too much line spacing makes it hard to come back to the next line of text. A good line height also depends on how long your line is. Optimum word count per line ranges between 8-15 words per line (aim for 10-12 for average copy, long texts will probably require more) and line height should be greater if the word count is greater.

I normally use line-height:1.3em or something around the realms of 1.1em to 1.4em. 1.5 is often too large.



The final step is to see how your design looks on different resolutions and platforms. BrowserShots offers a fantastic free service that does just that:
http://browsershots.org/


Hope that helps,

Esopo.


0
 
b0lsc0ttCommented:
Body is a way to specify the "default" font family, size, etc.  Let me know if you have any other questions.

bol
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 5
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now