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.

Font styles:

Font:

Inline CSS example:

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

Internal style sheet example: Full code

p {
     font-family: arial;
}

Font size:

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;
}

Font color:

Inline CSS example:

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

Internal style sheet example: Full code

p {
     color: #2d2e2e;
}

Line height:

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;
}

Font stack:

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;
}

Page and content dimensions:

Page width:

Inline CSS example:

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

Internal style sheet example: Full code

div {
     width: 901px;
}

Content width:

Inline CSS example:

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

Internal style sheet example: Full code

div {
     width: 568px;
}

Banner dimensions

Banner height:

Inline CSS example:

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

Internal style sheet example: Full code

div {
     height: 85px;
}

Navigation

Navigation height:

Inline CSS example:

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

Internal style sheet example: Full code

div {
     height: 29px;
}

Navigation color:

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;
}

Padding between navigation links:

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;
}

Navigation type:

Navigation link dividers:

Navigation hover effect:

Links

Link color:

Inline CSS example:

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

Internal style sheet example: Full code

a {
     color: #125ca2;
}

Link decoration:

Inline CSS example:

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

Internal style sheet example: Full code

a {
     text-decoration: none;
}

Divs

Top padding:

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;
}

Right padding:

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;
}

Bottom padding:

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;
}

Left padding:

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;
}

Top margin:

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;
}

Right margin:

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;
}

Bottom margin:

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;
}

Left margin:

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;
}

h1

h1 Font:

Inline CSS example:

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

Internal style sheet example: Full code

h1 {
     font-family: arial;
}

h1 Font size:

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;
}

h1 Color:

Inline CSS example:

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

Internal style sheet example: Full code

h1 {
     color: #47544d;
}

h1 Line height:

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;
}

h1 Font stack:

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;
}

h2

h2 Font:

Inline CSS example:

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

Internal style sheet example: Full code

h2 {
     font-family: arial;
}

h2 Font size:

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;
}

h2 Color:

Inline CSS example:

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

Internal style sheet example: Full code

h2 {
     color: #3b3229;
}

h2 Line height:

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;
}

h2 Font stack:

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;
}

h3

h3 Font:

Inline CSS example:

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

Internal style sheet example: Full code

h3 {
     font-family: verdana;
}

h3 Font size:

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;
}

h3 Color:

Inline CSS example:

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

Internal style sheet example: Full code

h3 {
     color: #514b42;
}

h3 Line height:

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;
}

h3 Font stack:

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;
}

h4

h4 Font:

Inline CSS example:

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

Internal style sheet example: Full code

h4 {
     font-family: arial;
}

h4 Font size:

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;
}

h4 Color:

Inline CSS example:

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

Internal style sheet example: Full code

h4 {
     color: #21232a;
}

h4 Line height:

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;
}

h4 Font stack:

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;
}

Other tips

Edge definition:

Date format:

Example:

Today's date is January 31, 2016. 

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

Colors

Fonts