[File] CSS Typography

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
Karlos94
Forum Newbie
Posts: 3
Joined: Wed Sep 22, 2010 12:55 am

[File] CSS Typography

Post by 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 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;
}
Post Reply