Fonts as a Design Element for Websites

Fonts, like images, beautiful colors and a user-friendly navigation, are a design choice. A font can either enhance or detract from the theme and feeling of your web design. Successful web designers understand this and know or learn which typefaces are most effective. The rules in the web environment are anything but arbitrary so they need to be followed if a website is to engage the reader rather than turn them away.

There are a lot of fonts out there, so many that choosing a font for your website can be overwhelming. However, the choice is important. Certainly you want people to read the useful content provided on your site. The intricate details of a font – such as weight, kerning, axes, strokes and counters – affect how we read, although we are rarely conscious of it. The font that you choose could determine how much text is read and how effective your site is.

Yes, there are thousands of fonts from which to choose but only a few are successful on the web. Readability and availability are the issues. First, consider the difference between two popular font types: serif and sans serif.

Serif or sans serif

Serif fonts are fonts that have fine cross lines at the ends of the letters. Because the lines make each character more distinctive, serif text is typically easier to read in print, but generally harder to read on a monitor, particularly at smaller sizes. Serif fonts have been used for centuries in printed books, magazines and newspapers. Consider a serif font for your website if you wish to convey qualities like warm, personal, artistic, distinguished, traditional, conservative or intellectual. Serif fonts are effective as headings or for text and documents intended to be downloaded and printed. The most common serif font is Times New Roman and just happens to be the default for most windows-based browsers.

Sans means ‘without’ in French, so naturally a sans-serif font doesn’t have the embellishments at the end of each stroke. Sans serif fonts are generally thought to be better for the web. This was particularly true when computer screens didn’t have a high enough resolution to capture the fine details of the serifs. They could appear blurred and unclear. Even today, on a screen, sans serif fonts appear more readable. Sans serif fonts convey qualities like technical, cool, clean, crisp, youthful, modern or uncluttered. The most popular web font at the moment seems to be Verdana. It is a sans serif font and looks good on both PCs and Macs. Because of this, it is one of the most popular, widely-used fonts on the web.

Availability constrained by technology

Some fonts look better on PCs (such as Arial), while others are best viewed on Macs (like Helvetica and Geneva). The range of fonts that webmasters can reliably select for their pages is not as wide as you may think. In addition to avoiding serif fonts (perhaps less of a requirement with today’s hardware), web designers have long been limited by what fonts website users have installed on their computers.

The list of universally available fonts is slowly growing, with additional fonts such as Cambria and Candara coming into the picture. In an ideal world, all fonts would be loaded onto all systems to open up design possibilities. Until then, conventional wisdom suggests that you use Web safe fonts from the following table:

Serif

San Serif

Monospace

By selecting one or more of these fonts for your web site, you will be able to somewhat control how your text will appear in most browsers. Using Cascading Style Sheets, which is the underlying technology used by a web page to control its appearance, web designers can specify a list of fonts to be used. In CSS your font-family code might look something like:

p{font-family: verdana, arial, helvetica, sans-serif}

The first three fonts are pretty common and chances are most computers will have at least one installed, but in case one doesn’t you have provided a generic sans-serif font for the browser to use.

Technology advances

Google Web fonts are an amazing free resource for web designers as seen at the ZolamanDesign. Web fonts make a website more beautiful, readable, accessible and open. This is a newer approach that makes it quick and easy for everyone to use a broader selection of Web fonts. With over 500 font families and counting, Google’s API service makes it easy to add Web fonts to a website in seconds. The service runs on Google’s servers which are fast, reliable and tested. Google provides this service free of charge.

Breaking the rules

Occasionally, there will be times when the “artist” in us desires to break the design rules. Thus, if you absolutely want to ensure your text displays in a specific font you will need to make that text an image. Just be aware that if you want to make any changes to the content at all, you’re going to have to edit the image itself, which is much more tedious than going in and editing text. This should be done sparingly as search engines won’t recognize the text in the image. Using images for your text will also increase the download time of your pages. However, there are places where it’s appropriate to use an image to display text. A good example would be your company logo.

Remember you are the designer

While fonts may not seem as important a design element as color and graphics, thoughtful
consideration should go into your selections. The fonts will convey important information about your company, products and services. They will help visitors successfully navigate your site and interact with you. Most important, the right fonts will contribute to your site’s overall visitor experience. If the impact is positive, your content will be read and you have made the right choices.

3812c19d2183eb5d728f7dbaa68b4184431f63725259e82489

Using Twitter to build traffic to your website

Let’s jump right in and get your account set up in Twitter!

Create Your Twitter Account

Twitter is rapidly growing and it is one of the most powerful ways to get a ton of targeted traffic to your website with very little effort. Twitter is a powerful marketing tool that can be used for lead generation, networking, customer service, building a community and as a branding tool.

---

Not only can you use Twitter to build solid relationships with other people in your niche, but you can also get real time updates on anything happening in the world. You can even use Twitter to do research on what others are saying about a topic right now – including your own business.

All of the potential of Twitter means increased income for you. Plus, Twitter is very easy to use and takes just a few minutes each day to update…

To set up your Twitter account, go to Twitter. Setting up your account is a simple process.If you need any help just let us know.

Now that you have your Twitter profile set up, let’s discuss using Twitter effectively…

How To Use Twitter Effectively

Log in to your account.

At the very top of your Twitter window, you’ll see this:
Here are the functions of the menu bar:

• You can click the “Home” link to go to your homepage and Twitter feed.
• Use @ Connect to see who has mentioned you (we will cover this in a bit).
• Use # Discover to explore new content.
• The Search bar will search Twitter.
• You can click the drop-down menu next to the face icon to access several options:
  • Direct Messages – These are private messages that only the person you send one to can see. You can only message people who are following you.
  • Lists – Lists are a great way to organize the people you follow and group them. Remember all lists are public.
  • Settings
• Use the blue icon for quickly composing a tweet.

Understanding Tweets
There are a couple of ways to compose a tweet:
1. Click Home.

2. Click the Blue icon.

Let’s see what happens as you start to type in that box:
Notice the 95 at the bottom? This is a countdown of how many characters I have left. With Twitter, each update can be no more than 140 characters.

A character is anything you can type… all letters (a-z), all numbers (1-9), all punctuation
(.@#%^&) and even spaces. They all count toward your 140 character limit, so use them wisely.

Tip: Links embedded in your tweets are a great way to drive traffic to your site. But, links can take up a lot of valuable space. Remember, you are only allowed 140 characters total, including any links you want to send.

We recommend using a tool – such as Bitly- for shortening URLs so they take up fewer characters. Simply copy and paste the URL you want to shorten onto Bitly’s website, and click “Shorten.” Then, copy and paste the new URL into your tweet.

On the Home page, look to the left and you’ll see information about your account, including number of Tweets you’ve sent, who you are following and who is following you.

Followers are basically the same thing as friends, however, you don’t have to follow everyone who follows you and people you follow don’t have to follow you back. Another way to look at this is Followers are people who have “opted-in” to your Tweets.

When you say you are “following” someone, that means their Tweets (or Twitter updates) will appear on the right side of the Home page. You will also see Recommendations of who to follow and Trends in your area.

Here is our current Twitter Feed:

@ Connect

@ Connect is when someone Tweets and mentions you by including the @ symbol followed by your Twitter username. For example, if your Twitter username was JoeSmith, their Tweet would include @JoeSmith somewhere in it. They can either be replying to something you Tweeted or simply mentioning you in their Tweet.

Here is an example:

What Can You Do With Tweets

With each Tweet in your Twitter Feed you can make it a Favorite, Reply to it or Retweet it. When you hover over each Tweet in your Twitter Feed, you’ll see the options appear.

Favorite – By clicking “Favorite” you are adding that Tweet to a list of your Favorite Tweets that anyone can access. This is not a list of people, only a list of the Tweets you clicked “Favorite” on.

Tip: Anytime you get a positive comment or testimonial via a Tweet – click the Favorite link and before long, you’ll have a whole list of Testimonials that others will find on Twitter.

Reply – Reply means that you are responding to what they Tweeted. When you click the
Reply button, a popup will appear, like this:Then, you’ll just type your response in the white box and click “Tweet”. This reply will appear in your Twitter Feed for all your Followers to see.

Retweets (shown as “RT”) are when you repost a Tweet from someone you are following so your followers can see it. It’s similar to forwarding an email message, except it goes to everyone who is following you.

Here’s an example:

Hashtags
Hashtags are defined as community driven conventions for adding additional context and metadata to your Tweets.

Basically when someone tweets about something specific, they can use a Hashtag to make it show up in the results if someone else searches for that Hashtag.

Hashtags are denoted by “#”, like this:
Examples of some Hashtags are: #seo, #wordpress and #webdesign.

In Twitter, you can search for a Hashtag and see everything people are Tweeting about it.

Here is a website to find popular Hashtags to use.

Viewing Other People’s Profiles

When you’re viewing your Twitter Feed, you can click on anyone’s name and a pop-up box will appear.

In the pop-up box, you can click their username (with the @ symbol) and see their full profile, including their Tweets, who they are following, whose following them and more.

Twitter Tips
• The goal of all social media is to increase your exposure. On Twitter we do this by building our list of followers. The best way to increase your followers is by following people.

◦ Follow people who tweet using a hashtag that is relevant to your business.

◦ You can click on people’s followers and follow their followers.

◦ Don’t follow more than 100 people in one day or Twitter may think you are a spammer and block or cancel your profile.

• When someone follows you, follow them back.
• Don’t just update. Interact.

Twitter Tools

SocialOomph
• Let’s you schedule tweets and automate your account.

Twitbacks
• A website that lets you create a free Twitter background

MyTweetSpace
• Another website with free Twitter backgrounds

Tweetdeck
• Allows you to keep track of people you want to build great relationships with by grouping them into columns.
• But don’t leave this tool turned on all the time or you’ll never get anything else done.

Twellow
• Twellow is like the Twitter yellow pages
• You can search for people on Twitter by name, keyword, location, etc

Search.Twitter
• Allows you to search for anything and get a live feed of it on Twitter
• Tip: Type in your name (or business name) and see what others are saying about you

Bitly
• Bitly is a tool for shortening URLs so they will fit in the 140 character

Embedding Timelines
• Allows you to add a Twitter feed to your websites.

Our next lesson will cover setting up your Facebook  account, including a Facebook Business page and we’ll show you how to integrate Facebook and Twitter!

Also, share your process, questions, suggestions – or whatever you want – in the comments below…

For daily tips visit our website @: http://www.zolamandesign.com/tutorial/daily-tips