A font is that exclusive property of design, that not only relays emotion but also defines style. For designers, getting the font right is very important because the right fonts can help convey the mood of the information without having the reader to read the text. If you’re a designer and find it difficult to select the right font from the tens or hundreds of fonts installed on your system, Wordmark.it, a free web service can help you achieve just that, easily.

The page over at Wordmark.it loads all the fonts installed on your system, and displays a sample using a word or phrase that you provide. Once all the fonts are loaded which takes no more than a few seconds you can increase or decrease the size of the sample text, or flip the background-foreground colors, in case you need white text on black background. You can also single out fonts you like by clicking over them and viewing them all later using the filter provided.

Wordmark.it

I’d like to share something interesting that I learned some days back. I was going through an article on Learning jQuery and my eyes struck on the date of the post. I was quite impressed the way it was designed and presented. At first, I thought it was an image, but when I viewed the source, I realized that it was done with CSS. I was very eager to learn how it was done and I Googled for this particular trick and found Snook’s article, Text Rotation With CSS. It wasn’t that hard to learn and implement as I had thought of it. I experimented on this trick and learned quite a bit of it. I altered the coding to insert Techie-Buzz logo and here’s the end result:

Demo | Download Source

The Magical Code:

HTML Code:

<div class="logo_box">
     <span class="techie_sample">Techie</span>
     <span class="tblogo_sample"><img src="tb.png" /></span>
     <span class="buzz_sample">Buzz</span>
</div>

CSS Code:

/* Techie-Buzz.com - Text rotation exmaple */
.logo_box
{
float: left;
background-color: #fff;
border: 1px solid #000000;
color: #ffffff;
position: relative;
margin: 0 0 0 20px;
}

.logo_box .techie_sample
{
display: block;
text-align: center;
font-size: 30px;
line-height: 30px;
padding: 2px 0;
background-color: #000;
}

.logo_box .tblogo_sample
{
display: block;
padding: 2px 24px 2px 0;
}

.logo_box .buzz_sample
{
display: block;
color:#000;
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
position: absolute;
right: 0;
bottom: 9px;
font-size: 24px;
}
*:first-child+html .logo_box .buzz_sample { right: -28px; } /* IE7 positions element differently to IE6 & 8 */

.logo_box span:nth-child(3)
{
right: -16px;
bottom: 24px;
}

Pretty simple, isn’t it? Download the source code.

P.S. Though this trick is a little old, I thought it would be great sharing it with you. Hope you liked it.

Are you looking for free and affordable applications that will make your web life easier? Look no further! Here are a handful of add-ons that streamline the graphic design process.

1. Skitch.com

Skitch.com enables users to more quickly capture screen shots and drag them into email for sharing. The software automatically saves and names files to speed up the process. You can even annotate images with text and sketches and share them with colleagues. Use Skitch to show an image to a colleague or client and get their quick feedback on it.

Requirements: Max OSX 10.4.6 and higher
Cost: Free

2. Adobe Kuler
Kuler is an online application that’s also accessible through CS5 software. Use Kuler to generate color schemes for print and digital projects.

It’s got a community feature for sharing ideas and is a great source for color inspiration. Since it’s built into CS5 software, folks with the Adobe Creative Suite don’t even have to open a browser window.

Requirements: n/a
Cost: Free

3. Firefox Colorzilla & Google Chrome Eyedropper
Depending on your preference of browsers, these two add-ons will help you pick up any color you see on the web, analyze it and recreate it. It’s great for when you’re browsing sites such as logopond.com and want to repurpose an interesting color combination for your own work.

Requirements: Current versions of Google Chrome or Mozilla Firefox web browsers
Cost: Free

4. Lorem Ipsum Generator

It’s an industry-wide practice to flow dummy Latin text into a mock-up layout. The Latin helps designer’s see what the piece would look like with content. Instead of digging through old files to copy and paste dummy-text, use the Google Chrome Lorem Ipsum Generator add-on to create fresh text for each project.

Requirements: Current version of Google Chrome web browser
Cost: Free

5. Adobe Air Shrink O’Matic

An add-on application for Adobe AIR that lets you resize images in large batches. Perfect for getting files ready for the web. The app handles JPGs, GIFs and PNGs, and lets users set the output sizes, file names and end-formats.

Requirements: Adobe AIR 1.5
Cost: Free

6. Adobe Ideas Application for iPad & iPhone

A great tool for iPad and iPhone users who want the ability to sketch ideas on the go. The application integrates with Adobe Creative Suite software, so it’s easy to import ideas when you get back to work.

Requirements: Compatible with iPad and iPhone OS 3.2 or later
Cost: Free

7. Mac Rabbit CSS Editor

A CSS editor perfect for graphic designers who want to create beautiful websites using style sheets. This editor is easy to use whether you are a web expert or a beginner. The visual editing tools, don’t   dumb down the code, but instead help novices to learn to use CSS as they go along.

Requirements: Mac OS X 10.5 or higher
Cost: Free trial or $39.95 to purchase

If you are a web designer, the very first extension which should be installed in your browser is definitely Firebug. The extension is available for Firefox as well as Google Chrome and allows you to customize the CSS and style properties of different web elements on any web page.

One of the problems with Firebug is that you are not able to save the customized design for later use. Of course, you can copy the applied changes to a simple text file but then again it is not very convenient. This is because when you open the same webpage later, you have to apply the styles all over again.

This is extremely annoying and time consuming, especially when you are designing something and want to implement the changes after you have completed the whole design. In case of Firebug, you have to note down the changes and apply them recursively.

Stylebot is a chrome extension which aims to simplify the customization part of different web elements, making it more accessible and adaptable.

After the extension is installed, click the Stylebot icon placed just next to the chrome address bar and you will see a sidebar appearing to the right where you can define the different CSS rules.

You can modify the font type, font sizes, background color, hex codes and pretty much every CSS element. When you are done, Stylebot will save the style properties locally in your computer so that everytime you visit the same webpage, the applied styles are executed.

You don’t need to write the applied changes elsewhere because Stylebot will note the URL of the webpage and save the style changes automatically, which can be seen from the extension options.

To see Stylebot in action, watch the video demonstration below:

Hence, if you want a good tool which can save customized CSS rules of any webpage, it’s worth giving Stylebot a try.

Hand bags and purses always make a fashion statement and if you want your statement to shout out that you are a Geek-Chick, you might want to take a look at the recycled keyboard purse. The recycled purse is eco-friendly and will give out right message of Go Green.

Recycled Keyboard Handbag:

• Zippered handbag / purse with shoulder strap
• Top Flap
• Cotton-lined interior
• Size: 9" x 6-1/2" (purse)
• 365 black keys are used in each bag

This purse is available for $39.95 from netroma.

Christopher Monro DeLorenzo has designed an amusing set of stickers for your keyboard. Each image represents the corresponding key to it. Like Pirate represents P.

Targeting the students, these stickers contain cultural icons to Greek mythology, this keyboard sticker set will advance the alphabetical knowledge of any child, or adult. If you are interested in buying those stickers, you will have to wait. These stickers are not available as of now, but you can contact Christopher Monro DeLorenzo via his website and he will let you know when they are available.

If you have ever designed graphics you know that sometimes it becomes hard to get the right colors. You want to create something unique and new but you are not sure what colors you should use or may be your mind isn’t even going to some of the colors. If you are ever stuck in a case like this, SwatchSpot can be your savior.

SwatchSpot is a simple web app that provides you with random colors swatches for your design inspiration. SImply head over to SwatchSpot and you’ll see a palette of 6 different colors with their color codes. If you like any of them, you can simply copy the code or you can download the whole palette as a png file.

If you don’t like the colors in the palette, simply click on reload palette to see a new set of colors.

Techie-Buzz Verdict:

SwatchSpot is one of the simplest web apps built around a powerful concept. If you are running out of color ideas and can’t thing of more colors, visit SwatchSpot to get your inspiration. The application works perfectly but I think it would provide even more value if a user to could combine different colors using the app and create their customized palette.

Ever found your avatar to be too simple? Think it doesn’t really represent what you are? Head over to AvatarsDB to find an avatar that suits you. With over 38,000 avatars in over 500 categories, you are sure to find something that you’ll like.

Avatars are spread over a variety of categories including animals, anime, movies, sports, music, people and art. AvatarsDB also contains over 400 animated avatars that you can use. Simply browse through the database or search for an avatar. Once you like something, you can download it to your local drive or get an HTML code to embed it on a web page or social network.

Each avatar is rated by users. If you are not sure how an avatar would look against a specific background, you can test it by selecting a background color. You also have an option to re-size most of the avatars to your desired size. You can also contribute by uploading free avatars to the database.

Twitter has rolled out a new design for the homepage and it looks pretty good we must say, the new design makes use of bolder colors and rearranges the trending topics.

However you will have to logout first before you can see the new design.

Nothing much has changed in the inside pages though, not new but they have also added a new section in the settings page for user widgets.

What do you think of the new homepage design?

[via a tweet]

PimpYourFont is an online collection of over 15,000 free truetype fonts available for download. All listed fonts are manually selected from hundreds of thousands of fonts available on the web.   The site lets you browse   fonts alphabetically or simply   search by keyword. You can preview each font by typing some text and also see how it would appear in different sizes. PimpYourFont also provides information about the Font Style and Font Family of each font.

Fonts are nicely classified in various categories like Arabic, Old School, Western, Retro, Monospaced, Pixelated, Digital e.t.c.  Additionally you can check out top-100 fonts, skim through the recently uploaded fonts, rate fonts and see how they have been rated by other users.