Skip to content

CSS/HTML Toys

October 27, 2011

I looked at a lot of links and all my classmates helped stimulate my thinking about what to look for…and now I’ve narrowed it down to two choice ones. Any tools that help me visualize what exactly I’m encoding before I actually upload the code I find invaluable. Typetester at http://www.typetester.org/ allows you to select up to three different fonts at a time to compare side-by-side. This tool shows you what fonts are most readable–it has a list of safe fonts as well as default fonts for different operating systems. As you scroll down the page, you can view your fonts in a number of combinations like italics, bold, small-caps (or all three). Font size, spacing, and color are also adjustable.

For previewing all your CSS stylesheets and HTML code, try out http://jsfiddle.net/. Just type in the appropriate box and hit the button “run” to see the result of your work.

Advertisements
4 Comments leave one →
  1. October 27, 2011 11:56 pm

    These are great finds, Dominique! I like how in TypeTester you can adjust the font size as well and it shows the text in different forms (bold, italic, caps, etc.), as it really shows you how the font will show up on a web page. This could be a great tool when considering accessibility–it’s so important to create fonts that are readable by older people or others with sight impairments.

    The jsfiddle site was also really useful! It’s nice to know of a resource to check your coding and styling without having the extra step of uploading documents over and over again before they are finished. I know I’ve had a few occurrences where I needed to try out a different font size and had to keep uploading the document just to see how that small adjustment manifested on the website.

    Thanks for sharing

  2. October 28, 2011 9:23 am

    Good stuff Dominique! I like how responsive TypeTester is. This is great for someone like me who is challenged when it comes to picking out color schemes, fonts, etc. Sambalibrarian makes a good point in that these sites can help with creating accessible web sites in a fast manner. It is tedious to have to tweak and upload a page over and over. Thanks for sharing!

  3. Victoria permalink
    October 28, 2011 4:08 pm

    I think these are both interesting websites. Typetester will be good when trying to figure out what font and color I want to use without having to continually change and save the document, upload and then view it on the website & decide if I like it. Thanks for sharing these websites!

  4. October 28, 2011 11:33 pm

    That is awesome! I always go back and forth between which fonts to use, and being able to compare them next to each other would be great and then I could see what looks best to me and what is actually readable to others!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: