Typewritten Web Page

mattisfrommars

I'm creating a page for a friend's band and they want "it to look like it was made on a typewriter" Now i downloaded me a nice typewritery font. And snazzy it is too. But until CSS allows me to make users download my font i can't use it just as text. I see myself with three options: 1. make images using photoshop Pros: Looks how i want it to look- can add other effects. Cons: It'll mean that I personally have to do EVERY update on their site 2. make the content in flash Pros: Can load data from a text file so they can update the site theyself. Cons: I have absolutely no idea how to do this. And scrollbars? How do they work in flash again? 3. Use PHP GD to create images Pros: If it works it'd be nice Cons: loads- how do you know how tall to make the image? I got some wierd newline errors when i tried tihs- i'm not exactly clued up on the GD front. What would you suggest?

Mark

the gd option will be a big pain. The flash option is nice, I guess, but I don't do flash. I hate the idea of constantly being harrassed to make changes. I'd recommend courier or sans-serif.

adrian.

http://www.flowerburger.com use sifr for headings and courier for everything else. xhtml/css is the only to go.

c-unit

Yeah, I'd go with Courier New. Are these the types of looks your going for - http://www.fox.com/prisonbreak/bios/ http://www.nbc.com/The_Office/

papoo

http://www.spoono.com/html/tutorials/tutorial.php?id=19 that may help you. keep your font, display it as text.

Evios

Use the pre tag?

I'm all for it 

c-unit

Embedded fonts only work in IE right now as pointed out in the tutorial.

lech

sifr is a good method of faking it at least when it comes down to the headers. You can easily duplicate the typewritter effect with a decent assortment of standard fonts and using the correct weight/size achive pretty much what you want without skimping on the effect. I would recommend not using flash, that's pretty much creating a major headache for yourself in the long-run. Instead, just toss together a nice template atop an existing cms and do it all in css. GD would help things along providing you work out a system to manage the users ability to create their own headers.

fernando

why not use something like Courier as the secondary font, and then make a note somewhere asking folks to download the font (free) and sort them out? font-family: 'Styling special font', courier, serif; might be a decent work-around

ADM

I'm all for courier.. but having not seen the typewriting font you're looking at I have no idea. Also as mentioned you can use GD to grab text from a text file and convert it to an image. That's probably an idea.

fernando

I don't know why but when GD does that font writing it ends up looking really bad imho.

michaelontheroof

Check out A List Aparts <a href="http://www.alistapart.com/articles/dynatext/">Dynamic Text Replacement</a> Article. Text ist replaced via JavaScript with GD-generated Images. It's accessible for users and searchengines and very easy to set up.

mattisfrommars

I might go for Courier New for the main text and GD for headings. That one for the office looks good (it even uses the same coffee stain brush i was thinking about using :P) Might be a bit of a headache to design, but twill all work out in the end. Thanks for the advice/convincing me courier can do the trick

Bergamot

Keep in mind you can use Sifr, and have it fall back to the GD-created image if the user isn't running flash. Also keep in mind that, if you use GD, you can cache the generated images on the server to keep performance up, since headlines don't change much.

fernando

I want to recant my opinion that GD replacement doesn't look very good. That ala article is sweet, and the example is very nicely done. Takes a very difficult font and replaces text with it quite well.

Seems like a simple script, and exchanging it for H2 and H1 is an easy gig.

Might start messing with that myself...

ithcy

that example had me confused for a minute... is a fontache anything like a moustache?

Mr. Fahrenheit

I thought it was more like a headache

fernando

hahahaha...

Isn't it just a matter of adding the php code as an include or a require, loading the font to somewhere, pointing the script to the font and then telling it that H1 and H2 need to be rewritten as that font?

seems pretty simple.

Tell ya what... I'll try it, and then I'll write it up and point out the link if I'm successful. I really should refrain from saying that anything looks "good" or "simple" until I've done it myself...

fernando

This just got a lot more interesting:

sifr

Bergamot

Didn't navitron mention sIFR back in the third post?

jakob_r

If you want it a little more authentically worn and less 'perfect' than Courier, here are some free typewriter fonts for using with DTR/sIFR, or a selection of other commercial fonts, which won't necessarily break the bank. Some good classics include American Typewriter or Trixie.