[File] CSS Typography

[Karlos94]

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:

• 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.

/*
CSS Typography file by Karl Ballard is licensed under a 
Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.

Contact: [email][email protected][/email]

To find out more, go to: [url]http://creativecommons.org/licenses/by-sa/2.0/uk/[/url]
*/

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

[Djkanna]

To be honest with you I don't think small should be the same size as sub and sup as those two are generally smaller.

You could also add in things like selection and dfn. Also perhaps setting blockquote to quote: none;

Nice work.

[Karlos94]

I see what you mean, but I personally believe it should for example if you rendered all three elements in a browser together it would look like:

I knew I missed a few things, thanks! Also I don't think I should because personally that should be done in the reset.css so that's the reason I didn't include that.

[Djkanna]

Fair enough, I'm glad you actually posted this not many people here actually care about typography to much. :P

I understand the reset.css part, thinking about it:

h1, h2, h3, h4, h5, h6 {

color: #000000;

margin: 0.7em 0 0.2em 0;

}

Could possibly material for the reset rather than the typography then the specifics done within the typography.

Maybe we could get a reset going too?? Maybe even a column/grid basics css files too. :D

[Karlos94]

I already have my own reset.css file actually, if I see people who like this I'll update my reset.css and release it as well.. And if that is good gets enough popularity, I'll finish off the CSS framework by creating a grid system to go with it as well!