[File] CSS Typography
Posted: Sun Oct 17, 2010 6:59 pm
First off, I made a typography file that is a drop-in replacement for websites. I made this because I have a project on the go at the moment (No details yet, before someone asks) but this is only the first version because I will be adding more, editing and even removing somethings.
Things to note:
Things to note:
- It's released under - Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License (For more information go to: http://creativecommons.org/licenses/by-sa/2.0/uk/)
- No documentation as this was meant to be personal, and I don't document CSS.
- Any suggestions, please comment on how it can be improved.
- No flaming I'd rather have constructive criticism.
Code: Select all
/*
CSS Typography file by Karl Ballard is licensed under a
Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.
Contact: karlos94@live.co.uk
To find out more, go to: http://creativecommons.org/licenses/by-sa/2.0/uk/
*/
body {
font: 0.9em "Helvetica Neue", Arial, Helvetica, sans-serif;
line-height: 1.5em;
}
h1, h2, h3, h4, h5, h6 {
color: #000000;
margin: 0.7em 0 0.2em 0;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.75em;
}
h5 {
font-size: 1.5em;
}
h6 {
font-size: 1.25em;
}
p {
font-size: 0.85em;
line-height: 1.2em;
word-spacing: 0.125em;
margin: 1em 0;
}
ol, ul, dl {
line-height: 1.25em;
margin: 1.2em 0;
padding-left: 1.5em;
}
ol {
list-style: decimal inside none;
}
ol ol {
list-style: lower-latin inside none;
}
ol ol ol {
list-style: lower-roman inside none;
}
ul {
list-style: disc inside none;
}
ul ul {
list-style: circle inside none;
}
ul ul ul {
list-style: square inside none;
}
li {
font-size: 0.9em;
}
dd {
margin-left: 0.4em;
font-style: oblique;
}
a, a:hover { color: #445566; }
a:focus { border: 1px dotted black; }
a:hover { background: rgba(51, 68, 85, 0.3); }
abbr[title], acronym[title], dfn[title] {
border-bottom: 1px dotted black;
cursor: help;
}
abbr, acronym, code, kbd, samp, small, var {
line-height: 1.1em;
}
abbr, acronym {
font-size: 90%;
letter-spacing: 0.05em;
text-transform: uppercase;
}
address, pre {
font-size: 1em;
line-height: 1.3em;
}
pre {
white-space:pre;
}
code, kbd, samp, pre, tt, var {
font-family: mono-space, monospace;
}
b, dt, strong {
font-weight: bold;
}
blockquote {
font-size: 1em;
margin: 1.2em;
}
blockquote cite {
font-size: 0.9em;
margin-left: 1em;
}
cite, dfn, em, i {
font-style: italic;
}
del, ins, mark {
padding: 0 0.25em;
text-decoration: none;
}
del {
color: #B30000;
background: none repeat scroll 0 0 rgba(255, 51, 51, 0.5);
text-decoration: line-through;
}
ins {
color: #003300;
background: none repeat scroll 0 0 rgba(77, 255, 77, 0.5);
}
mark {
background: none repeat scroll 0 0 rgba(255, 212, 128, 0.8);
}
small, sup, sub {
font-size: 0.8em;
}
sup, sub {
line-height: 0;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}