Jump to content
Sign in to follow this  
Karlos94

[File] CSS Typography

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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: textu.gif

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...