Showing posts with label stack. Show all posts
Showing posts with label stack. Show all posts

Wednesday 20 October 2010

Basic font stack

Here is an example of a basic font stack using tried and tested design principles. They are a great start to a web design. Essentially, all you would need to do for your own site is change the font-family references with the CSS to fonts you like and you are away. Then you can start addressing colour, but the sizes are a good idea to keep, maybe just play with the overall font-size within the body declaration. Have fun!

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font stack Using Design Principles</title>
<style type="text/css">
body
{
margin:0 auto;
        width:800px;
        line-height:140%;
        font-size:85%;
}
h1, h2, h3, h4
{
    font-family:Georgia, Times New Roman, Times, serif;
    font-weight:normal;  
}
h1, h2
{
    text-transform:uppercase;
}
h1
{
    font-size:5em;  
}
h2
{
    font-size:4em;  
}
h3
{
    font-size:3em;  
}
h4
{
    font-size:2em;  
}
p, blockquote, strong, ul, ol, input, small, span
{
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight:normal;
    letter-spacing:0.1em;
}
blockquote
{
    text-indent: -0.8em;
    font-size: 1.5em;
}
p
{
    font-size: 1.25em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;  
}
input
{
    font-size: 1.0em;
}
small
{
    font-size: 0.75em;
}
span
{
    font-style: italic;
}
strong
{
    font-variant:small-caps;
}
p.justified
{
    text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Pellentesque habitant morbi <small>tristique senectus et netus et malesuada</small> fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p class="justified">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <strong>Vestibulum tortor quam,</strong> feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>
</body>
</html>