Mick Redman: fonts

Showing posts with label fonts. Show all posts

Wednesday 1 June 2011

Simple layout #33

I haven't done a simple design layout in a while. Haven't had much time to be honest. This one is very simple. Two fonts, 1 colour, but there is an idea how very small.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 33</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo:regular' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.9em/1.5em Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:60em;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:6em;
background:#00A6F2;
padding:0.5em 0 0.5em 0;
}
#middlePart
{
min-height:2em;
}
#bottomPart
{
min-height:2em;
}
#pictureHolder, #wordedContent
{
float:left;
width:48%;
}
h1, h2, h3
{
font-family:'Arvo', arial, serif;
}
h1
{
font-size:4em;
line-height:1em;
}
h2
{
font-size:2em;
}
h3
{
margin:1.5em 0 1.5em 0;
font-size:1.5em;
color:#00A6F2;
}
p
{
font-family: 'Muli', arial, serif;
text-align:justify;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<section id="topPart">
<header class="contentHolder">
<h1>Hello</h1>
<h2>And welcome to my website...</h2>
</header>
</section>
<section id="middlePart">
<section class="contentContainer">
<article id="pictureHolder">
<a href="http://www.ourecohouse.info/"><img src="http://www.publicdomainpictures.net/pictures/1000/nahled/1-1203254406i5t0.jpg" alt="An Egg by Petr Kratochvil" /></a>
</article>
<aside id="wordedContent">
<h3>Let's create something beautiful<br />
From something simple</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada 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>
</aside>
</section>
</section>
</body>
</html>

Saturday 19 March 2011

Big fonts for header

This is another small post. All I have done is stretched the h2 to match the length of the h1. The effect works very well.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stretch Fonts to Selector</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
header
{
margin:4em;
width:20em;
text-align:center;
}
h1, h2
{
font-weight:bold;
text-transform:uppercase;
}
h1
{
color:#A5A5A5;
font-size:11em;
}
h2
{
color:#464646;
font-size:6.5em;
margin-top:-0.3em;
}
.i
{
color:#FF0000;
}
</style>
</head>
<body>
<header>
<h1>B<span class="i">i</span>g</h1>
<h2>T<span class="i">i</span>tle</h2>
</header>
</body>
</html>

Monday 31 January 2011

Smooth fonts. No really! Just use Cufón.

There is a little pain in this exercise, but it genuinely works. It's worth it.

You see, when I'm at my day job, I have to use Windows. It's rubbish. And particularly rubbish is the way it handles fonts through a web browser. Even IE! Knowing that lots of other poor people have to use Windows, it's important to me to try and make the fonts of my site nice and smooth. I've done quite a bit of surfing on this, but I believe I've currently got the answer. Use Cufón. Available from http://cufon.shoqolate.com.

Step 1:
Find a TTF or OTF copy if the font you would like in your page. Yes, the file.
Step 2:
Go to http://cufon.shoqolate.com and get the latest version of the JavaScript file.
Step 3:
After the style references in your web page, add a reference to the newly downloaded JavaScript file thus:
<script type="text/javascript" src="cufon-yui.js"></script>

Step 4:

Convert your font by posting it up to http://cufon.shoqolate.com, remembering to check the boxes saying "The EULAs of these fonts allow Web Embedding" and "I acknowledge and accept these terms". Completing this process gives you a .js file for your font.

Step 5:

Add a reference to the .js file you got from http://cufon.shoqolate.com thus:

Step 6:

Add the necessary conversions to your page thus:

Cufon.replace('h1', { fontFamily: 'myNewFont' });

</script>

Step 7:

Below the body tag of your page, add the line:
<script type="text/javascript">Cufon.now();</script>

This is for IE. I know!

Behold! Smooth fonts for your website. Even in Windows!