Typetester Public Beta Goes Live
The Typetester is finally fixed and here it is – the public beta. A big thank you to all the guys for their invaluable help and suggestions. OK, enough talk – take a look at the Typetester.
Still here?
Still here? Interested in more details? Well, the Typetester is an online application, that can be pretty useful when you need to check or choose a typeface for your (next) project. You can easily set up a typeface with the most of the options applicable for the screen type, including the colors of the text and the background. The color fields will accept any meaningful format – wether you type #f00, #ff0000, rgb(255,0,0) or red – it’s all the same. There is also nifty color picker, which pops up when you double-click the input field.
Fonts from user’s system are pulled into a web page (big thanks goes to the smart guys from UP). This way, I don’t have to worry that I missed some font and you don’t have to type your favorite typeface by hand. However, if your browser doesn’t support this feature for whatever reason, the application will degrade accordingly, but unfortunately, you’ll have to type-in font names letter by letter. You can just stick with those from the predefined list and save yourself a trouble.
There are some more handy features, but I don’t want to spoil the fun of exploration.
How it all began?
First, there were just some rudimentary functions, which enabled quick setup and preview of the fonts. It started taking more serious approach, after my fellow colleagues showed a great appreciation for this kind of tools and encouraged further development.
The core functionality was already there. What was missing was more pleasant and usable interface. So I went into it more deeply and added features along the way (that’s why the code is still a mess).
During the further development, a few type savvy fellas took a look at it and requested for some more features. I still have some things on my mind, which I’d like to add, but right now, I feel that I should take a break a few days and then look at it from another perspective. After all, let’s first see what the response will be to this first public version.
I want details
There’s so many things to talk about – why some decisions were made and what solutions were applied. But since I’m expecting some overseen bugs reported in a next few days, I’d rather leave some space for that. More in-depth explanation comes soon. Promise.
22 Comments
This is great, just the sort of thing which I can, and will be using for future projects.
Comment (#) by Stuart — 18th September 2005.
Ooh, love the color picker :D
Comment (#) by bojan — 18th September 2005.
Nice thing, and very useful. One thing I would like to do is define text size in .em as well, since pixels are rarely used in real world projects. It would also be nice (but way complicated) to get a screenshot from each browser with the defined settings.
Comment (#) by David — 18th September 2005.
Great work Marko! This will be very handy indeed. Thanks!
Comment (#) by If Else — 18th September 2005.
Great app, I will be using this a lot! One thing, I want the tracking to go into minus numbers, so I can have:
letter-spacing: -2px;
In my code. I doubt this will be done but it’s worth asking for, great job!
Matt
Comment (#) by Matt Dempsey — 18th September 2005.
Man, this is a great tool that I was looking for for a very long time. You did a wonderful job.
Comment (#) by Tomas — 18th September 2005.
awesome awesome awesome - thank you thank you thank you!
Comment (#) by adam — 18th September 2005.
Awesome work, thanks a bunch. Very useful. :0
The one thing I don’t quite like though is the color picker… Maybe you could give Colourmod a shot?
http://colourmod.com
Comment (#) by yurivish — 18th September 2005.
David, defining text size in ems, could produce unexpected results in different browsers (you know who I’m talking about here). This way, there’s a solid measure, which can be later re-adjusted for the particular project. However, it’s not the final decision, I just want to make sure it’s reliable. Heck, I might even provide an option to choose between those two.
Matt, here you go – tracking down to
-10px.yurivish, that’s very interesting. I might give it a try.
Comment (#) by marko — 18th September 2005.
Superb.
Comment (#) by Ozh — 18th September 2005.
very cool! thank you!
Comment (#) by alicson — 19th September 2005.
lovin’ it!
thaks!
:)
Comment (#) by m — 19th September 2005.
Every time someone comes out with a great web app, I always have to say that it is exactly what I needed…and never knew it. Well I always knew I needed this one. I used to test a site on every browser whenever I made a css font change. Not anymore. Thanks Marko! Great Work!
Comment (#) by Jason Beaird — 19th September 2005.
great!
maybee you should finetune the color-picker. First probabely nobody will find it (cause usually nodody reads the description of the tool first). Then the timeout seems to kick in only when i mouseout from the color field (that require that i roll in in the firstplace) then the timeout should be cleared when i mouseover again. Additionaly it took me some time to find that after the “regular” there are many more examples like “bold” ect.
- No critisism just some thoughts of somebody who tries this wonderfull app for the first time.
Comment (#) by nicolas — 19th September 2005.
Ok, your official. Web rock star popularity is in your future. I’m blown away, my friend. Well done, and very useful.
Comment (#) by Cody Lindley — 19th September 2005.
nicolas, you’re right! The interface does need more polishing. If I’d take your opinion offending, I wouldn’t develop such thing in the first place… Any remark is very welcome, so thanks for yours.
Jason & Cody, you guys are making me blush.
Comment (#) by marko — 19th September 2005.
Marko, it is an amazing tool I was looking for several months now. Thanks!
Comment (#) by Vitaly Friedman — 19th September 2005.
Excellent work, Marko. It does everything efficiently and effectively.
I’ve sent you an email with more detailed comments, but you should provide a link somewhere prominent (perhaps the “About” text) direct to this blog post so users can provide quick feedback.
Comment (#) by Stephen Coles — 19th September 2005.
Ovo je brate ludo! Hvala ti puno. Fantastican tool. Nemogu da verujem kako je dobro. Stvarno super! Veliki kompliment!
Comment (#) by milos — 19th September 2005.
Great work, very useful. Thanks
Comment (#) by rekkerd — 21st September 2005.
great, that you offer us this!
but i miss one thing. it would be perfect to have the possiblity to adjust the width of the colums.
hey, thank you
thomas
Comment (#) by thomas — 23rd September 2005.
Awesome project! I always loved the way you do it.
Keep up this good brilliant work!
Comment (#) by Denver — 27th September 2005.
Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.