tags:

views:

528

answers:

7

In CSS, I usually go with the usual

font-family: Arial, Helvetica, sans-serif;

For a little change, I'm going for a font that looks like handwriting. Can some of the expert CSS folks here suggest what would be some of the safest fonts (most widely available in most browsers) that look like hardwriting

+3  A: 

Similar to sans-serif there is a generic cursive that it a "font that resembles handwriting". This will vary by browser (as will sans-serif) but could be a good place to start.

Here is a survey of script family fonts installed per user:

http://www.codestyle.org/css/font-family/sampler-Cursive.shtml

They all look significantly different from each other so you'd lose some consistency, but some are quite widely adopted.

Their main installed fonts are (FOR WINDOWS ONLY):

Comic Sans MS     99.13%  
Monotype Corsiva    82.29%  
Bradley Hand ITC    63.02% 
Tempus Sans ITC      62.68% 
French Script MT    62.39%
Alex Mcp
That will likely end up either Comic Sans, or a cursive but not truly handwriting-style font.
fig
http://bancomicsans.com/main/?p=1
Robusto
@fig-gnuton : edited to reflect platform
Alex Mcp
+2  A: 

There is no handwriting font that would be reliably available in most browsers across all platforms. There are subsets like the fonts that come with Windows Vista or 7 but if you want to achieve any serious reliable coverage, it's likely that you'll have to resort to delivering the font alongside the web page - which, sadly, makes things complicated.

Related SO questions:

Pekka
Not true, Comic Sans although a dubious choice is reliably available.
fig
@fig I personally wouldn't regard Comic Sans as a true handwriting font, even though it sort of is... The OP will have to decide whether it's handwriting-y enough.
Pekka
@Pekka, fair enough, but most would consider it one and even if not, it's the closest thing to one that's installed in most browsers.
fig
+1  A: 

The only web-safe handwriting font is Comic Sans - if you want to inflict that on your users. ;)

For percentages, see the results of the Code Style survey as of this month:

Windows  99.13%
Mac      89.94%
Linux    60.95%

The most common cursive one on Linux is URW Chancery L, but it's not cross-platform.

fig
+1  A: 

I suppose Comic Sans or Lucida handwriting would be some of the most widely available 'handwriting' fonts, although they're not great fonts. You might be better served by looking into some of the font embeding options, either using fancy-smancy html 5 stuff: http://www.broken-links.com/2009/05/28/exciting-times-html-5-web-fonts/ which won't be entirely supported, or using sIFR which is flash based: http://www.mikeindustries.com/blog/sifr, or some combination of these solutions to reach all users.

quoo
+1  A: 

Comic Sans would be the most handwritingesque font common to macs and pcs, that being said you could always embed a font in your page.

danspants
+1  A: 

Read This: http://www.w3.org/Style/Examples/007/fonts

and for a non js way: http://css-tricks.com/css-image-replacement/

aSeptik
A: 

There's an alternative. If you're familiar with Javscript or Jquery. There's a very nice script called "Cufon" that does a thing called "Font Replacement". With this simple to use script, you can use ANY font you want on your website. I suggest you start by checking it's documentation, then create the cufon-js version of the font and then use it !

With code like this, you would be already doing font replacement ...check this simplicity

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="Vegur_300.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1');
        </script>
    </head>
    <body>
        <h1>This text will be shown in Vegur.</h1>
    </body>
</html>

Please visit this website for more information: http://cufon.shoqolate.com/generate/ (this is were you can generate your favorite font and make it ready to be used as a replacement on your site). Remember to include the jquery file!

UXdesigner