Friday, May 27, 2011

Recipe Web Page Design: Choosing Fonts

Confession: I don't know much about aesthetic appeal. I delegate the task of finding what might look nice to people online. So, for fonts, I did a search on google for "popular typewriter fonts in web design," because I kinda want to model the look of an old style typewriter, and this article, which seems like a good start. The recommended font for plain text purposes seemed to be "Another Typewriter,"

Which can be seen in the example, or could be, if my site didn't have such a dark theme, but you can still kinda see it. I found a download link here for it. A word of caution is that embedding fonts can be kinda difficult for web developers, but standards for CSS3 are close to being finalized, so now we do have a way to embed a font if desired, so says this page. The page also links this tool which generates some css and some html examples so that you can just cut and paste to your desired pages and css documents. This is what I added to the top of mine (after the import for the reset, mind you!)


This says that all fonts in the body tag should use this font, which is named up above. Now I am going to play around with giving the text some space so that it flows a little better. Here are some tags I added... I don't want to repost my html again, but I am noting that I moved the header outside of the body:




And a few screenshots. I think the shape is starting to come along well now... just need to get the rounded corners, and add some pictures to bring it full circle. Below are screenshots of what it looks like in both firefox and internet explorer. It is always a good idea to try looking at a website in at least internet explorer and in one other browser to make sure that it will work for most visitors.


No comments:

Post a Comment