An incredibly powerful combination of typography and a cause, HomelessFonts.org takes the handwriting of the homeless and turns them into typefaces. These typefaces are then sold to support the Arrels Foundation, who is working on getting people off the street. The symbolism of the personal hand drawn street begging signs turned into an actual source of real aid is quite incredible. I'm still wrapping my head around it.
What a cool disruptive font - I can't wait for the web version!
Well, you can use this trick for just about anything in your CSS really. It just so happens that at a certain small weight, Museo Sans really crunches on Windows XP Firefox. Weather or not we can target specifically XP I'm not sure yet.. (if anyone knows chime in!) But we can target all Firefox's on all Window's Machines. So here is how you do it...
1. Make a css file called ff.css and put this code in there:
[code]
@-moz-document url-prefix(){
#hackery {
font-family: Helvetica, sans-serif;
}
}
[/code]
Now that you've made your little hack document...
2. fill up in between the moz brackets with whatever selectors you are trying to change.
3. call your new ff style sheet in your header.php like so:
[code]
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Windows", 0) !== FALSE) { ?>
<link rel="stylesheet" type="text/css" media="all" href="ff.css" />
<?php } ?>
[/code]
voila! Firefox targeted on only windows!
You can now fix your fonts and go from this: (crunchy liberation serif to georgia italic)
to this:
To target Window XP in particular (note that this would not cover versions before that), this should work.
[code]
<?php
if ( false !== stripos( $_SERVER['HTTP_USER_AGENT'], 'Windows NT 5.1' )
|| false !== stripos( $_SERVER['HTTP_USER_AGENT'], 'Windows XP' ) ) :
?>
<link rel="stylesheet" type="text/css" media="all" href="ff.css" />
<?php endif; ?>
[/code]
Web Typography is coming a long way with the use of @font-face. We are finally able to break out of system fonts and have options! Unfortunately, font-rendering on IE/Windows is still sub-par. The rendering engines have a hard time interpreting fonts properly that are embedded with @font-face that have yet to be re-crafted as a web-font version.
I have been using Typekit to render my web-fonts since the service became available. It is an incredible and takes away a lot of the headache in embedding, keeping up with browser/mobile compatibility, etc. If you haven't tried Typekit out, you can get a free account to see if you like it - then upgrade if you decide you're in love. <3
I've noticed that sometimes the fonts that I've chosen can end up so "crunchy" in IE that I would rather just stack my fonts to the closest system font, and disable Typekit for Internet Explorer.
Here is a way you can Enable it for just Mac: you can query the user agent header with php in a conditional statement that wraps around your Typekit js:
[code]
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Mac", 0) !== FALSE) { ?>
<script type="text/javascript" src="yourtypekitlink.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php } ?>
[/code]
Don't want to exclude Linux? Disable it for Windows Only:
[code]
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Windows", 0) === FALSE) { ?>
<script type="text/javascript" src="yourtypekitlink.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php } ?>
[/code]
Here are examples of type crunch in a title:
LTC Bodoni Type Crunch in IE (eww!)
LTC Bodoni on Mac with Typekit (perfect!)
Typekit disabled on IE / reverts back to font stack
Here are some more examples with a different font:
typekit on mac: Ltc Bodoni and Proxima Nova (perfect!)
Typekit enabled on Windows (crunchy! Eeek!)
typekit disabled on windows (better than the crunch.)
Interested in browser-specific disabling? These methods might be interesting to look into: (but I haven't done it yet)
http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/
http://rafael.adm.br/css_browser_selector/
PS: Firefox achieves the same screen-shots as IE. Interesting.
Just came across this really awesome book from Studio3 called "Hyperactivitypography from A to Z." The book is currently sold out, but I am definitely going to order one once they are back in stock. Until then, you can flip through this awesome retro-child-inspired typography book here or check out their blog to see when copies shall be back in stock. Creative and well done!
found via Play Me Design
Earlier this week I posed about an HF&J article on combining typefaces. Here is another article on typography. I found it to be very informative. It lays out what an instructor of typography wants to leave with his students. The Author give you six things to leave with. I found it to be a very good read. Also, subscribe to the ilovetypography.com rss. It is wonderful.
-sara cannon
http://ilovetypography.com/2010/03/25/a-few-things-i’ve-learned-about-typeface-design/
This article by H&FJ has been circling around lately. I stumbled upon it first via my friend Winslow.. and then I've been seeing it all around the inter-webs lately. Its a great little article and is insightful and encouraging to those wanting to produce good typography. I was always told in college "no more than three fonts on a page ever!" but in reality, that rule is meerly a giudeline and as you can see, there can be lots of fonts combined and it still look spectacular. enjoy the article!
- sara cannon
The Article: http://www.typography.com/email/2010_03/index_tw.htm
Sara Cannon is a Design and Digital Strategy Consultant, UX/UI Designer, Creative Director, & Artist.
Have a project I could help you with? Contact me at sara@saracannon.com.