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

Code: [Select]

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

[Delifisek]

Great,

I going to use my NewBSD Licenced CMS project.

I put this header

/*
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/
*/

In my css file.

Is It ok ?

[Karlos94]

Yes..

If you use any part of my CSS file, all I'd like is a mention in the CSS file so your as that is basically showing you did not create it but, you are using it under a CC license and that it was created by me. 

[Delifisek]

Yep I gave full credit...

You work is great. It was changed my project looks instantly.

Before the your css file, I think generating css theme is just simple matching colors, Find good contrasts and thats it. But after your work, I realise to it was beyond the color matching...

Now my pages look elegant and easy to read.

Thanks for sharing your work. It was one the very useful thing to add my project to enhance it.

[Karlos94]

Thank you for the credit and the appraisal.

Typography is power feature when creating a website, most people forget about it! I know I am a rubbish designer. As a developer I like to have text and other HTML elements be easy to view, and not so harsh on the eye as a site can get cluttered very easily! I know what you mean.. I can never find good colours that contrast but are easy on the eye so I thought, lets just focus on the typography!

No problem, glad to help!


Look Forward to: A reset.css which focuses on tags that are only available in HTML5 (Maybe using CSS3 as well to help get the web up-to-date)!

[Harkins]

Look Forward to: A reset.css which focuses on tags that are only available in HTML5 (Maybe using CSS3 as well to help get the web up-to-date)!

http://www.html5boilerplate.com includes a take on this

[Karlos94]

Look Forward to: A reset.css which focuses on tags that are only available in HTML5 (Maybe using CSS3 as well to help get the web up-to-date)!

http://www.html5boilerplate.com includes a take on this

Thanks, but I already have my own.