What are the best font and size for a website?

Is there a font that is best for my website, knowing that he is open to all public and all ages? And what size of characters to choose? Should it be set as percentages (%), pixels (px) or typographic measurement units (em)?

Take into account for the size of the police that all users do have perfect eyesight. A site aimed at young professionals will adopt a policy reduced to save space, but this is not the choice that works more generally.

About the font, it may be crucial in some cases to have a clear distinction between characters 1 (one) l (small l) I (capital i), which is not the case for Arial, but Verdana does it very well.

Fonts and the characters one, l, capital i, o lowercase, o uppercase, zero:

Arial: 1 l I o O 0
Verdana: 1 l I o O 0
Georgia: 1 l I o O 0
Helvetica: 1 l I o O 0
Times New Roman: 1 l I o O 0

If you use different fonts for different elements of the page expressing the size in percentages is best because "em" can have different results according to the font.

Examples for popular sites

Assuming that the most popular and most visited sites can not be wrong, to have an objective answer to all the questions, it would be best to see what choices they have made!

Amazon

body 
{
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: small;
    background-color: #FFFFFF;
    color: #000000;
    margin-top: 0px;
}  
.h1
{
    font-size: medium;
}  

Google

body
{
    height:100%;
    font-family:Helvetica,Arial,sans-serif;
    font-size:small;
    color:#000;
    background-color:#fff;
    margin:3px 8px 0 0;
    padding:0;
}
h1 { font-size:160%}
h2 { font-size:140%}
h3 { font-size:120%}

Apple

body
{
    font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    background-color: #fff;
    color: #333; 
    margin:0;
    padding:0;
}  
h1 { font-size: 24px; font-weight: bold; line-height: 36px; margin-bottom: 18px; } 
h2 { font-size: 16px; font-weight: bold; line-height: 18px; margin-bottom: 18px; } 
h3 { font-size: 1em; font-weight: bold; line-height: 18px; }

New York Times

body 
{ 
    background-color:#FFFFFF;   
    color:#333333; 
    font-family:georgia,"times new   roman",times,serif; 
    font-size:62.5%; 
    line-height:1.5em; 
    margin:0;   
    padding:13px 0; 
} 

Commonalities:

• Use of px and percentages and not em.
• Font color black or dark gray (# 333).
• Background color always white.
• Font selection: each site has its preferences. Taking into account the alternative fonts, the most used are: Arial, Verdana, sans-serif.

Conclusion

The best font:

Choose among Arial, Verdana, Georgia, for the content with the point made above in mind. Sans-serif alternative font is required.
You can use different fonts for titles and other elements.

Font size:

Sites tend to use small size. A font size of 13 pixels is generally considered a good compromise between readability and space. About the sizes of titles, see the choices made by Google or Apple.

The unit of measure:

The base size, that of the body, is expressed with the small code. The size of tags are expressed in percentage or in pixels.
Using pixel does not alter the relative aspect: when the user expands the page, the text pixels are enlarged with the rest.

See also

• Tool to test font sizes and colors.