Share/Bookmark

Best CSS Values

I always seem to be looking for things like "What's the best font size?" or "What's a good div height?" or "How much margin should be on the top, left, bottom and right?" All the sites I go to always seem to give the same answer: "Whatever's right for you." I don't know what's right for me, otherwise I wouldn't be asking. I can compare two things side by side and determine which one I like better, but for a lot of this stuff I don't even know where to start.

That's why I've put this page together. I spent a lot of time deeply analyzing 27 of the top pages in the world to figure out what style information they were using. All the sites I analyzed are famous because they have a purpose—like Google or Facebook—but many people don't realize that if they didn't have pleasing designs, their services never would have made it off the ground. The other reason I chose the top sites is because their designs have to be cross user and cross browser compatible. A small web page like mine can get away with not supporting all major browsers or platforms perfectly, but a big site like Amazon can't. Not only that, but the large sites have several dedicated programmers and designers who spend hundreds of hours making sure every last detail is perfect. By studying their designs I learned from all their hard work and now I'd like to share it with you.

I'm sure by this time you have plenty of questions like what my methods were or which sites I analyzed. To cut to the chase and give you the real information you came here looking for, I've included all that information at the bottom of this page after the results.

Jump down:
What's the best font for html?
What's the best font size for html?
What's the best font color for html?
What's the best line height for html?
What's the best font stack for html?
How wide should my site be?
How wide should my text be?
What's the best banner height?
What's the best navigation bar height?
What's the best navigation bar color?
How much padding should I put between navigation links?
Should I use tables, divs or lists for my navigation layout?
What should I use to separate the navigation links?
What hover effect should I have on navigation links?
More...

Font styles:

Font:

The best font is: arial

Inline CSS example:

<p style='font-family: arial;'>This text is arial</p>

Internal style sheet example: Full code

p {
     font-family: arial;
}
More info

Font size:

The best font size is: 13px.

Inline CSS example:

<p style='font-size: 13px;'>This text has a font size of 13px.</p>

Internal style sheet example: Full code

p {
     font-size: 13px;
}
More info

Font color:

The best font color is: #2d2e2e

Inline CSS example:

<p style='color: #2d2e2e;'>This text is the color #2d2e2e</p>

Internal style sheet example: Full code

p {
     color: #2d2e2e;
}
More info

Line height:

The best line height is: 17px.

Inline CSS example:

<p style='line-height: 17px;'>This text has a line height of 17px.</p>

Internal style sheet example: Full code

p {
     line-height: 17px;
}
More info

Font stack:

The best font stack is: arial, arial, verdana, sans-serif;

Inline CSS example:

<p style='font-family: arial, arial, verdana, sans-serif;'>This text is arial.</p>

Internal style sheet example: Full code

p {
     font-family: arial, arial, verdana, sans-serif;
}
More info

Page and content dimensions:

Page width:

The best page width is: 901px.

Inline CSS example:

<div style='width: 901px;'>This div has a width of 901px.</div>

Internal style sheet example: Full code

div {
     width: 901px;
}
More info

Content width:

The best content width is: 568px.

Inline CSS example:

<div style='width: 568px;'>This div has a width of 568px.</div>

Internal style sheet example: Full code

div {
     width: 568px;
}
More info

Banner dimensions

Banner height:

The best banner height is: 85px.

Inline CSS example:

<div style='height: 85px;'>This div has a height of 85px.</div>

Internal style sheet example: Full code

div {
     height: 85px;
}
More info

Navigation

Navigation height:

The best navigation height is: 29px.

Inline CSS example:

<div style='height: 29px;'>This div has a height of 29px.</div>

Internal style sheet example: Full code

div {
     height: 29px;
}
More info

Navigation color:

The best navigation color is: #b0a5b2

Inline CSS example:

<div style='background-color: #b0a5b2;'>This text is the color #b0a5b2</div>

Internal style sheet example: Full code

div {
     background-color: #b0a5b2;
}
More info

Padding between navigation links:

The best padding between navigation links is: 38px.

Inline CSS example:

<div style='padding-right: 38px;'>This div has a right padding of 38px.</div>

Internal style sheet example: Full code

div {
     padding-right: 38px;
}
More info

Navigation type:

The best html element to use for navigation is a: List.
More info

Navigation link dividers:

The best divider for navigation links is a: nothing.
More info

Navigation hover effect:

The best hover effect for navigation links is: underline.
More info

Links

Link color:

The best link color is: #125ca2

Inline CSS example:

<a style='color: #125ca2;'>This text is the color #125ca2</a>

Internal style sheet example: Full code

a {
     color: #125ca2;
}
More info

Link decoration:

The best link decoration is: none.

Inline CSS example:

<a style='text-decoration: none;'>This link is not underlined.</a>

Internal style sheet example: Full code

a {
     text-decoration: none;
}
More info

Divs

Top padding:

The best top padding is: 14px.

Inline CSS example:

<div style='padding-top: 14px;'>This div has a top padding of 14px.</div>

Internal style sheet example: Full code

div {
     padding-top: 14px;
}
More info

Right padding:

The best right padding is: 21px.

Inline CSS example:

<div style='padding-right: 21px;'>This div has a right padding of 21px.</div>

Internal style sheet example: Full code

div {
     padding-right: 21px;
}
More info

Bottom padding:

The best bottom padding is: 19px.

Inline CSS example:

<div style='padding-bottom: 19px;'>This div has a bottom padding of 19px.</div>

Internal style sheet example: Full code

div {
     padding-bottom: 19px;
}
More info

Left padding:

The best left padding is: 17px.

Inline CSS example:

<div style='padding-left: 17px;'>This div has a left padding of 17px.</div>

Internal style sheet example: Full code

div {
     padding-left: 17px;
}
More info

Top margin:

The best top margin is: 18px.

Inline CSS example:

<div style='margin-top: 18px;'>This div has a top margin of 18px.</div>

Internal style sheet example: Full code

div {
     margin-top: 18px;
}
More info

Right margin:

The best right margin is: 16px.

Inline CSS example:

<div style='margin-right: 16px;'>This div has a right margin of 16px.</div>

Internal style sheet example: Full code

div {
     margin-right: 16px;
}
More info

Bottom margin:

The best bottom margin is: 27px.

Inline CSS example:

<div style='margin-bottom: 27px;'>This div has a bottom margin of 27px.</div>

Internal style sheet example: Full code

div {
     margin-bottom: 27px;
}
More info

Left margin:

The best left margin is: 16px.

Inline CSS example:

<div style='margin-left: 16px;'>This div has a left margin of 16px.</div>

Internal style sheet example: Full code

div {
     margin-left: 16px;
}
More info

h1

h1 Font:

The best h1 font is: arial

Inline CSS example:

<h1 style='font-family: arial;'>This text is arial</h1>

Internal style sheet example: Full code

h1 {
     font-family: arial;
}
More info

h1 Font size:

The best h1 font size is: 20px.

Inline CSS example:

<h1 style='font-size: 20px;'>This text has a font size of 20px.</h1>

Internal style sheet example: Full code

h1 {
     font-size: 20px;
}
More info

h1 Color:

The best h1 color is: #47544d

Inline CSS example:

<h1 style='color: #47544d;'>This text is the color #47544d</h1>

Internal style sheet example: Full code

h1 {
     color: #47544d;
}
More info

h1 Line height:

The best h1 line height is: 21px.

Inline CSS example:

<h1 style='line-height: 21px;'>This text has a line height of 21px.</h1>

Internal style sheet example: Full code

h1 {
     line-height: 21px;
}
More info

h1 Font stack:

The best h1 font stack is: arial, sans-serif;

Inline CSS example:

<p style='font-family: arial, sans-serif;'>This text is arial.</p>

Internal style sheet example: Full code

p {
     font-family: arial, sans-serif;
}
More info

h2

h2 Font:

The best h2 font is: arial

Inline CSS example:

<h2 style='font-family: arial;'>This text is arial</h2>

Internal style sheet example: Full code

h2 {
     font-family: arial;
}
More info

h2 Font size:

The best h2 font size is: 20px.

Inline CSS example:

<h2 style='font-size: 20px;'>This text has a font size of 20px.</h2>

Internal style sheet example: Full code

h2 {
     font-size: 20px;
}
More info

h2 Color:

The best h2 color is: #3b3229

Inline CSS example:

<h2 style='color: #3b3229;'>This text is the color #3b3229</h2>

Internal style sheet example: Full code

h2 {
     color: #3b3229;
}
More info

h2 Line height:

The best h2 line height is: 14px.

Inline CSS example:

<h2 style='line-height: 14px;'>This text has a line height of 14px.</h2>

Internal style sheet example: Full code

h2 {
     line-height: 14px;
}
More info

h2 Font stack:

The best h2 font stack is: arial, verdana, sans-serif;

Inline CSS example:

<p style='font-family: arial, verdana, sans-serif;'>This text is arial.</p>

Internal style sheet example: Full code

p {
     font-family: arial, verdana, sans-serif;
}
More info

h3

h3 Font:

The best h3 font is: verdana

Inline CSS example:

<h3 style='font-family: verdana;'>This text is verdana</h3>

Internal style sheet example: Full code

h3 {
     font-family: verdana;
}
More info

h3 Font size:

The best h3 font size is: 14px.

Inline CSS example:

<h3 style='font-size: 14px;'>This text has a font size of 14px.</h3>

Internal style sheet example: Full code

h3 {
     font-size: 14px;
}
More info

h3 Color:

The best h3 color is: #514b42

Inline CSS example:

<h3 style='color: #514b42;'>This text is the color #514b42</h3>

Internal style sheet example: Full code

h3 {
     color: #514b42;
}
More info

h3 Line height:

The best h3 line height is: 17px.

Inline CSS example:

<h3 style='line-height: 17px;'>This text has a line height of 17px.</h3>

Internal style sheet example: Full code

h3 {
     line-height: 17px;
}
More info

h3 Font stack:

The best h3 font stack is: verdana, arial, sans-serif;

Inline CSS example:

<p style='font-family: verdana, arial, sans-serif;'>This text is verdana.</p>

Internal style sheet example: Full code

p {
     font-family: verdana, arial, sans-serif;
}
More info

h4

h4 Font:

The best h4 font is: arial

Inline CSS example:

<h4 style='font-family: arial;'>This text is arial</h4>

Internal style sheet example: Full code

h4 {
     font-family: arial;
}
More info

h4 Font size:

The best h4 font size is: 12px.

Inline CSS example:

<h4 style='font-size: 12px;'>This text has a font size of 12px.</h4>

Internal style sheet example: Full code

h4 {
     font-size: 12px;
}
More info

h4 Color:

The best h4 color is: #21232a

Inline CSS example:

<h4 style='color: #21232a;'>This text is the color #21232a</h4>

Internal style sheet example: Full code

h4 {
     color: #21232a;
}
More info

h4 Line height:

The best h4 line height is: 14px.

Inline CSS example:

<h4 style='line-height: 14px;'>This text has a line height of 14px.</h4>

Internal style sheet example: Full code

h4 {
     line-height: 14px;
}
More info

h4 Font stack:

The best h4 font stack is: arial, verdana, sans-serif;

Inline CSS example:

<p style='font-family: arial, verdana, sans-serif;'>This text is arial.</p>

Internal style sheet example: Full code

p {
     font-family: arial, verdana, sans-serif;
}
More info

Other tips

Edge definition:

It's best to define the edge of your page.

Date format:

The best date format is: Month Day, Year.

Example:

Today's date is September 1, 2014. 

Shortcut Icon:

It's best to use a shortcut icon.



Methods and methodology

Collecting data

I used a firefox plugin called firebug and a macintosh pixel measuring application called pixelstick. Pixelstick was the first free mac pixel measuring program I came across that fit my needs; any other software would have done just fine. I definitely couldn't have done this study without firebug. Firebug was able to consolidate many stylesheets--often external and compressed--and display them in a very very easy to process manor. I should note that one of the main things I didn't use the css for was the margin and padding values. I measured those by hand. Why? Because it can often be very confusing to tell how much space is between two objects just by looking at the code. There might be a div with a certain padding, then another div inside with a border and a margin. From the users point of view there is just one gap, but from the coders point of view there are actually two seamless ones. The other advantage measuring by hand had was putting everything in the pixel unit.


Averaging color

Most web colors are recorded in hexadecimal(hex). Hex is just a short way of expressing a simple red green blue(RGB) color. The first two characters of a hex number are the red part, then next two the green and the final two the blue. If we take the example #45F1AB, 45 would be the red part, F1 would be the green part and AB would be the blue part. Some of these numbers contain letters because they are all in base 16. To average a color I simply average the red parts, the green parts and the blue parts then put them all back together. I also average like colors. I distinguish colors based on which color part is higher or lower than the others.


Sites I analyzed

Google
Facebook
Windows Live
MSN
Wikipedia
Blogger
Myspace
Rapidshare
Wordpress
Google Analytics
ebay
AOL
Amazon
Twitter
Phtotobucket
Go
Skyrock
IMDB
Conduit
BBC
CNN
Megaupload
Adobe




Table explanations

Sizes


Short table:
Smallest: 6px;
Largest: 20px;
Most common: 7px;
Total entries: 4
The tables are automatically generated from a database that stores all the information I recorded. Let's pretend that the database has a set of measurements as follows: 6,7,7,20. The smallest number is 6, which goes in the first row. The largest number is 20, which goes in the second row. The most common number is 7, which goes in the third row. Notice, the average of those numbers is 10, and that's what I'm assuming to be the "best" value. The reason I give you these other number is because in some situations you may find the most common number to be better than the average number or you might like to know a good range of numbers to work with. The final row in the table simply displays the total number of entries that were used to make the table. You might find this useful because an average of 30 numbers is likely to be far more telling than an average of only two.


Long table:
Smallest: 6px;
Largest: 20px;
Most common: 43.75%
Measured in px: 1
Measured in em: 1
Measured in %: 2
Total entries: 4
Line height and font size were far more complex to calculate than other sizes because they are sometimes measured in different units. Not only are the units different, but some of them are exact and others are relative. The three most common units for measuring font and line height sizes online are: pixels(px), em's and percents(%).

When recording information I always took down the websites base font size so I could use it for converting relative sizes. To convert a percent or em measurement to pixels, I start by converting the base to pixels(if it's not measured in px already). If the base is measured in percents then I divide it by 100 and multiply that by 16. If it's measured in em's then I just multiply it by 16. If it's measured at "small" then I just take it to be 13px. Then if a regular measurement is made in em's, I simply multiply it by the accepted base for that site. If it's measured in percents then I divide it by 100 and then multiply it by the base for that size.

Lets assume that we have a table with the following measurements: 6px,43.75%,43.75%,1.25em. If we know the base font size is 16px then we can convert all of those numbers into the following pixel measurements: 6px, 7px, 7px, 20px. The smallest number is 6, which goes in the first row. The largest number is 20, which goes in the second row. The most common number is 7, which goes in the third row. Notice, the average of those numbers is 10, and that's what I'm assuming to be the "best" value. The reason I give you these other number is because in some situations you may find the most common number to be better than the average number or you might like to know a good range of numbers to work with.

The next three rows show you how many of each unit the entries were measured in. You might find this useful when picking a unit to use or if you question the validity of my results. The final row in the table simply displays the total number of entries that were used to make the table. You might find this useful because an average of 30 numbers is likely to be far more telling than an average of only two.

Colors


Top table:
Websafe: #666666
Most common: #000000
Total entries: 3
Web safe colors display the same for everyone. There are 216 of them and they're commonly used by webmasters to ensure that their site looks the same for every user. The first row in this table is the closest web safe color to the "best" color. Imagine a set of colors as follows: #000000, #000000, #FFFFFF. Even though the average of these colors is #555555, the most common color in the group is #000000, which is what goes in the second row. The third row simply shows how many colors were used to make the table.


Bottom table:
Average common colors
1 #549c00
3 #112d44
8 #595959
In my methods section I talk about how I actually go about averaging colors. It may have crossed your mind that it doesn't make much sense to average all the colors in the database together, as doing so would almost surely result in a nasty brown color unless all the colors were of the same base(red, green etc.). That's why I also averaged only "like" colors. After making the grand average color, my program averages all the reds with the reds, the blues with the blues etc. and spits out this table, where the first column is how many of that color there were, the second column is the average hex value, and the third is just a little sample for you to see.


Fonts


Top table:
Primary choices
13 arial
3 lucida grande
2 verdana
This table shows the primary font choices in order, with the number of sites that picked the font in the first column, and what the font is in the second. In css you are allowed to have multiple font choices using things called "stacks" which look like: font-family: arial, "lucida grande", verdana, sans-serif; If the primary choice—in this case arial—can't be found, the browser will default to the next one and so on down the line. For this table I'm only using the primary fonts.


Bottom table:
Total choices
18 sans-serif
18 arial
7 helvetica
6 verdana
3 lucida grande
This table uses all the fonts from each websites "font stack" to give you a little bit bigger of a picture. From looking at the example I have listed above, it would appear that lucida grande is the second best font, but upon looking at all the font choices, it seems like more webmasters agree that helvetica is the next best pick.

Font stacks:
Second best arial, helvetica, verdana, sans-serif;
Most common arial, helvetica, sans-serif;
Imagine you had the following font stacks:

arial, helvetica, sans-serif;
arial, helvetica, sans-serif;
arial, helvetica, sans-serif;
arial, helvetica, sans-serif;
arial, verdana, sans-serif;
arial, verdana, sans-serif;
"lucida grande", verdana, sans-serif;
"lucida grande", verdana, sans-serif;
"lucida grande", verdana, sans-serif;

The "best" font stack would be: arial, "lucida grande", verdana, sans-serif; because arial is the most common first font, followed by lucida grande. Even though verdana is picked more often, lucida grande is picked first more often.

The second best font stack would be: arial, verdana, helvetica, sans-serif; because arial appears the most(regardless of place) followed by verdana and helvetica in order.

The most common font stack would be: arial, helvetica, sans-serif; because that stack appears the most often.

98%
618be2c8607751335c744054e06555a4bb7317eb82cd7cb1a9ab7136e0d89820abf33c609c4e4beb57a4b6b2eb1e4bfa59abdb0e675bad36825ab2e14d61f8c2
33