Solved

Neew a good font and point size for easy reading

Posted on 2006-11-17
14
339 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
  • 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 250 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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 250 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now