CSS-Typografie mit der Schrift Arial

Wie die Typografie aussieht, sieht man anhand der Beispielseite Typografie mit Arial und die Datei gibt es auch als Download Arial Typografie.

/* TYPOGRAPHY BOX elements -------------------------------------- */

body {
font-family: arial, helvetica, verdana sans-serif;
}

h1 {
font-size:2.3em;
font-weight:normal;
padding:0 0 0.3em;
}
h2 {
font-size: 1.6em;
padding: 0.5em 0 .3em 0;
}
h3 {
font-size:1.3em;
font-weight:bold;
padding:0.5em 0 0.3em;
}
h4 {
font-size: 1.1em;
font-weight: normal;
padding: 0.5em 0 .3em 0;
}
h5 {
font-size: 1.0em;
font-weight: normal;
padding: 0.5em 0 .3em 0;
}
h6 {
font-size: .9em;
font-weight: normal;
padding: 0.5em 0 .3em 0;
}

p {
font-size: .81em;
line-height: 1.3em;
padding: 0 0 1em 0;
}

blockquote {
font-style: italic;
line-height: 1.35em;
font-size: .79em;
padding: 0 1em 2em 2em;
}

pre {
font-family:"Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New",monospace;
padding: 1.5em 0;
}

ul {
margin: 0.5em 0 1em 1.5em;
list-style-type: square;
}
ol {
padding: 0.5em 0 1em 1.9em;
list-style: decimal;
list-style-position:outside;
}
li {
line-height:1.5em;
font-size: .81em;
}
li li {
line-height:1.5em;
font-size: 1em;
}
li li li {
line-height:1.3em;
font-size: 1em;
}

dl {
padding: 0.5em 0 1em 0;
font-size: .81em;
}
dt {
font-weight: bold;
padding: 0 0 .3em 0;
}
dd {
padding: 0 0 1em 1.5em;
}

address {
font-size: .81em;
line-height:1.2em;
}

img a {
border: none;
}


/* TYPOGRAPHY INLINE elements -------------------------------------- */

a:link {
color: #00f;
border-bottom: 1px solid #00f;
text-decoration: none;
font-weight: bold;
}
a:visited {
font-weight: bold;
color: #099;
border-bottom: 1px solid #099;
text-decoration: none;
}
a:hover {
border-bottom: 2px solid #00f;
}
a:active {
color: #0af;
}
a:focus {
color: #0af;
}

code, tt, kbd {
font-family:"Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New",monospace;
background: #ff0;
padding: 2px;
}

cite {
display: block;
font-family: Times New Roman, Garamond, georgia, serif;
font-size: 1.0em;
padding: 0.5em 0 1.5em 18em;
}
cite span {
text-align: right;
display: block;
}

em {}
strong {}
code {}
samp {}
kbd {}
tt {}
var {}
cite {}
dfn {}
abbr {}
acronym {}
strike {}
small { font-size: .81em}
span {}
strike {}
sub {}
sup {}
u {}
del {}

/* TABLE elements -------------------------------------- */

table {
margin: 0.5em 0 2em 0;
width: 100%;
}
tfoot td {
border-top: 1px solid #333;
border-bottom: 0;
padding: 0;
}
th {
font-size: .9em;
letter-spacing: 1px;
font-variant: small-caps;
padding: 4px 10px 2px 0;
border-bottom: 2px solid #333;
}
td {
font-size: .81em;
line-height:1.3em;
padding: 3px 5px 3px 0;
border-top: 1px solid #ddd;
}
tr:hover {
background: #f0f0f0;
}

/* FORM elements -------------------------------------- */

form {}
fieldset {}
legend {}
input {}
textarea {}
select {}

/* ADDITIONAL elements -------------------------------------- */

.teaser {
font-variant: small-caps;
font-size: .9em;
padding: 0 0 .7em 0;
}
.alignleft {
	margin: 3px 10px 3px 0;
	float: left;
}
.alignright {
	margin: 3px 0 3px 10px;
	float: right;
}
p.textalignright {
text-align: right;
}