Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Neew a good font and point size for easy reading

Posted on 2006-11-17
14
Medium Priority
?
380 Views
Last Modified: 2013-12-03
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
Comment
Question by:newbieweb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +2
14 Comments
 

Author Comment

by:newbieweb
ID: 17968514
correction: "Need" a good font...
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 1000 total points
ID: 17968642
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
 

Expert Comment

by:ba272
ID: 17968883
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17969050
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
 

Author Comment

by:newbieweb
ID: 17969218
bol,

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

Thanks
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17969289
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
 

Author Comment

by:newbieweb
ID: 17969347
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17969372
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
 

Author Comment

by:newbieweb
ID: 17973583
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
 
LVL 1

Expert Comment

by:Magnussen
ID: 17975113
'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
 

Expert Comment

by:ba272
ID: 17975178
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
 

Expert Comment

by:ba272
ID: 17975182
I did it again.

That post was from me, newbieweb
0
 
LVL 14

Assisted Solution

by:Esopo
Esopo earned 1000 total points
ID: 17978157
>>'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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17980786
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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question