Assuming you do understand the importance of typography (and you really should) then your selection will be as obsessive as mine. Remember, you don’t want to mix too many fonts together on the same page. It will make everything look cluttered. Pick a font that suits your image best and stick with it. Your logo and body text will probably be different fonts, but you want them to complement each other.

There are a couple of different ways to incorporate fonts into your WordPress design. All of them use CSS (Cascading Style Sheets), a language used on the web to style your design. For a great overview of how to use CSS you can check out our beginner’s guide, but for the purpose of fonts you will be most concerned with the body tag. The body tag is used to define characteristics that you wish to be uniform across your site (like fonts).

To access your CSS file in WordPress, click on the “Appearance” option in your admin panel and click “Editor.” This will take you to the Editor panel, where you can edit PHP and CSS code.

On the right side you will see a list of files under the heading Templates. If you scroll down you will see the heading Stylesheets. Navigate to style.css (or screen.css in some themes) and click on it.

If you scroll down you a little bit you will find your body tag. It will look a little bit like this:

body {
background: #fff;
line-height: 1;
}

Depending on what theme you are using , this may look slightly different, but the format will be the same. We will use this tag to indicate the font for your site. But first, a little debate to help your decision.

Serif vs. Sans Serif

Probably the most debated topic in the typography community, and yes there is a typography community, is whether to use a serif or sans serif font. A serif font contains little details that flourish each letter, such as horizontal lines at the bottom of an “A” or two vertical lines at the ends of a “T.” Times New Roman is one of the most popular examples of a serif font. A sans-serif font lacks these little details, like Arial or Helvetica. The font you are reading right now is sans-serif, the font in the title and headings are serif.

There are other categories of fonts, such as decorative or script, but these shouldn’t be used for paragraph text because they become illegible en masse.

In some circles, sans-serif fonts are heralded as the most readable and elegant of choices, with Helvetica at the top of the pyramid. They even made a movie about Helvetica, which, by the way, is very interesting if you are intrigued at all by this debate (read: for geeks only). In reality, the serif vs. sans-serif debate boils down to personal preference. I tend to use sans-serif fonts because I like their simplicity, but often not Helvetica because it is too ubiquitous. Your best bet is to choose a font that reflects the personality of your image. Are you trying to portray controlled (sans-serif) or a bit stylized (serif)?

Web Safe Fonts

Since websites are viewed on browsers, there are many fonts that we regularly use in say, a word processor, which a browser cannot read. Luckily there are fonts out there that are cross-browser compatible. These are called web safe fonts. These are free to use and are very easy to implement. They also do not put extra load time into your web pages, which other fonts may do. There are many web safe fonts to choose from, but here are a list of my favorites, and what they look like.

This is Times New Roman. A simple serif font.

Palantino Linotype/Book Antiqua uses serifs a little less.

This is Arial/Helvetica, it is the most basic of the sans-serif fonts.

Tahoma, a slightly more narrow sans-serif font.

Trebuchet MS, not used too frequently but a very even-handed, sans-serif look.

For a full list of web safe fonts click here. From this list, you should select fonts that are labeled as Mac/Windows.

To use these fonts on your WordPress site, we simply need to put the proper code in our CSS stylesheet. You will be adding the font class under the body tag we pulled up earlier. Let’s say we would like to use Arial (Helvetica on a Mac). We would want to define the font-family in our CSS. Under body we would insert the code “font-family: Arial, Helvetica, sans-serif;”. The full body tag would look like this:

body {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
}

In case you were wondering why I didn’t just insert Arial, you have to include the Windows font, the Mac equivalent and its classification. So Times New Roman would look like this:

body {
background: #fff;
font-family: Times New Roman, Times, serif;
}

because the font is called Times New Roman in Windows, Times on a Mac and is a serif font.

Using your font tag, you can also define other characteristics of your font such as size and style (bold or italic). You can also add a color tag underneath to change font color. When listing properties make sure to list style first, then size, then font family. So, let’s say I wanted bold, italic Trebuchet MS font that is green and 10px. I would type this into my stylesheet.

body {
background: #fff;
font: bold italic 10px ‘Trebuchet MS’, Helvetica, sans-serif;
color: green;
}

For the record, it would look like this.

You may have noticed that I put in Helvetica after Trebuchet. If a user’s computer does not have Trebuchet, it will show Helvetica, which is a fairly close sans-serif font.

Google Web Fonts

If web safe fonts don’t offer enough variety for you, you have another option. Google has made many custom fonts available for free use. There are far too many to list (447 and counting) but you can see Google’s web font listing here. The advantage of using Google fonts is near endless variety. The only downside is that there will be some additional load time for your WordPress site. This usually translates to only a few milliseconds, but some fonts take significantly more. For reference, the site you are on right now uses a Google Web Font, and it doesn’t take too long to load now does it?

Once you’ve sampled and found the font you want, click on “Quick Use.” This will take you to a separate page.

The web font page will give you the basic overview of the font. On the left you will see how your font looks and on the right you will see load time. This meter will tell you how much the font will add to your page load. In general you should try to be under about 40 and almost never go over 70. Droid Sans, the font I selected, is at a very safe 26. This will keep your WordPress pages running quickly.

If you scroll down a little bit you will see instructions to copy a piece of code into your header.

In the Editor section of your WordPress admin panel, find the Header (header.php) file on the right side. This will be under the sub-heading Templates. Click on the file to open it in the Editor. There will be lots of code in the header, but near the top there will be a section with several <link> tags. Copy the Google Web Fonts code and paste it into this section. Your code will look like this:

The next step is to go back to your stylesheet (click style.css on the right side) and insert the font-family code. On the Web font page you will see a section named Insert into CSS.

Copy this and insert this into your body tag. Just as before, it may be useful to add a backup in case a browser can’t read the web font. You can also add a font-size tag underneath this.

body {
background: #fff;
font-family: 'Droid Sans', Helvetica, sans-serif;
font-size:12px;
}

Heading Tags

If you scroll down a little more in your stylesheet, you will see that there are many other classes you can customize. One of these is heading tags, shown as h1, h2, h3, etc. These allow you to customize the various headings that are displayed in the dropdown menu in your WYSIWYG Editor.

You can use CSS to modify the characteristics of your font, or insert a new font altogether, into these heading tags. For instance let’s say I want Heading 1 to be bold and larger then my default font (which is now 12px). The code would look like

h1 {
font-size:12px;
font-weight: bold;
}

Or, if I want to change Heading 2 to Palantino Linotype, italic and white, the code would look like.

h2 {
font:italic 12px "Palatino Linotype", "Book Antiqua", Palatino, serif;
color:#FFF;
}

By default, WordPress has six headings, and you really shouldn’t need more, but you can add as needed. Once you have finished defining your heading tags in your stylesheet, select the Pages or Post menu option in your admin panel and select “Add New.” Use the Heading dropdown menu to select which font variation you want to use.

Choosing the right font is extremely important, and you should take some time to think about how it incorporates into your design. Of course, you probably don’t have to spend hours upon hours obsessing over it like I do. But if that happens to be the case, there is inspiration everywhere.

 Similar Posts:

None Found

Installing the Plugin

Installing NextGEN follows the same process as any other plugin. You can do it one of two ways.

1. Select “Add New Plugin” in the Plugin section of the menu on the left of the WordPress admin panel. Search for NextGEN Gallery and click “Install Now” to install and activate the plugin.
   
2. You can download the plugin from the WordPress website and upload it to your server manually using FTP. From the directory your blog is installed, navigate to /wp-content/plugins and upload the unzipped NextGEN folder. Then click on “Plugins” in your admin panel and select “Activate.”

Creating a Gallery

NextGEN will work great right out of the box, so you can go ahead and get started setting up your first gallery right away. You will see that there is a new menu option in your admin panel labeled “Gallery” which is used to manage your galleries. We will go over your various customization options later, but for now you can get started adding images.

1. Select “Add Gallery/Images” from the menu. Type in a name for your gallery in the text and click the Add Gallery button.
2. You will be directed to the media uploader where you can upload any images you want in that gallery. Don’t worry, if you forget some you can always add them later. For now select at least a couple of images and put them into the gallery. You will also see the “Scale Images…” checkbox. If you select this images will be resized to 800x600px so that the gallery outputs a consistent size. It is highly recommended that you size the images with proper crops yourself and leave this box unchecked.
3. From the “in to” dropdown menu select the gallery name that you created and select Upload Images.

NextGEN supports as many galleries as you want to create, with as many images in each one. When creating new galleries, the steps are exactly the same.

Inserting Your Gallery into Posts and Pages

The above steps will create your gallery, but they still need to be inserted into a post or page. Luckily, a button will be added to your WYSIWIG editor that adds the proper shortcode into your WordPress post or page. The button looks like this:  and it will give you three options.

1. Image list (shortcode: [nggallery id=x] ) This is your standard gallery. Image thumbnails will be lined up in a row and clicking on any of them will pop the image up in a shutter box.
   
2. Slideshow (shortcode: [slideshow id=x] ) This will show all of your images in slideshow format with a customizable delay between each one. In order for this to work, there should be no other plugins using jquery installed. If you are having trouble, skip down to the next option.
3. Imagebrowser (shortcode [imagebrowser id=x] ) The imagebrowser shows thumbnails for the gallery below the main image so users can easily scroll through without a lightbox
   

Customizing Your Gallery

Chances are your gallery will look pretty good as is. It has pretty lightweight CSS running behind it, so it will fit into virtually any theme. But if you’d like to get your hands a little dirty there are a couple of options that you can explore. Click “Options” on the NextGEN menu to the left of your dashboard to take a look. You will see a tab up at the top with a variety of options:

1. General Options allows you to add permalinks to your images, which will give them SEO-friendly URLs, activate an RSS feed, change the destination of your image uploads and dictate the maximum number of images per gallery.
2. The Thumbnails option lets you set the size and quality of the thumbnails displayed in your image list or browser. By default this will be 100 x 75, but you change that to whatever fits your theme. The “Set fix dimension” checkbox will keep the aspect ratio of your images consistent.
3. The Images and Gallery options manage the look and feel of your galleries. Remember above when I recommended that you resize images manually? You can change the default resize (800x600) to anything you like. You may have also noticed in the above screenshot that there is a “show as slideshow” option attached to each gallery. To turn this functionality off, unclick “Integrate slideshow” in the gallery tab. In addition, you can change the number of thumbnails displayed and how they are ordered in this tab.
4. The Watermark option can be used to place a custom watermark on all of your images. Simply upload your watermark (as a png, transparent image) and follow the steps.
5. Slideshow is an especially useful option tab. If you are having difficulties with your slideshow, you can try to manually fix them here. I will say that I have had trouble with the slideshow in the past, and the problem is almost always a conflicting plugin, so your best bet is to disable other plugins that use jQuery or Javascript until you find the conflicting one. But if you’re still having an issue, download Image Rotator and upload “imagerotator.swf” to your server. Then define the URL path in the “imagerotator” text box.

Expanding Your Gallery

There are a couple of ways you can expand the functionality of your gallery. For instance, you can change what effects are used to display the images by selecting the Effects tab on the options page. Thickbox and Shutter are two effects that can be used out of the box, but you can use a few others simply by installing compatible plugins. These are your effect options.

1. None – Images will link to the actual image file, which will be shown on a new blank page.
2. Thickbox – A thickbox is a white box that surrounds the image, which will also contain the caption.
3. Lightbox – The lightbox effect houses your images in a thin, lightweight box. To use it, install the Lightbox 2 plugin  and activate it. Then you can simply select the option from the effects dropdown menu.
4. Shutter – Images will flash up in a thin white box with a shadow behind it.
5. Highslide – Highslide is a zooming image viewer which uses a magnifying glass icon. You can install the Highslide plugin and activate it. If you are using Highslide, make sure that you have disabled your lightbox plugin or they will conflict (trust me).  Also note that in order to get rid of the Highslide watermark, you will have to purchase the plugin.

For reference, here’s what each effect will look like:

Shutter

Thickbox

Lightbox

Highslide

NextGEN also comes with a variety of skinned templates that you can use. You can use a shortcode to add these templates. So if you were displaying your first gallery with the shortcode [nggallery id=1], simply tack on a template name such as [nggallery id=1 template=templatename], replacing “templatename” with the template of your choice. The developer has made a full list of templates and demos available here.

Final Thoughts

There are hundreds of directions you can take your gallery in, and this guide will only get you started. Focus on what you want your images to say to your readers, and how they can enhance, not simply stand-in for, quality written content. Galleries are, after all, just one more tool for reaching wider audience (for more ideas about how to do this, check out our free blogging course). Once you get the hang of how to use NextGEN you will find it is very easy to use and manage.

Similar Posts:

None Found

In order to switch your host, you have to change your domain’s name servers. Simply put, these name servers tell browsers where they can find your website. When you’re working on a deadline as I was last night, you need things to switch quickly so you can make sure the new site is ready to go as soon as possible. The problem is, the changes you make aren’t necessarily instant. It can take up to 24 hours for your site to redirect and the results aren’t the same for everyone. Someone in Utah might see the new site while someone in New York is still getting served the old one.

Last night, as I was in a hurry to restore the database and get Blog Design Guy up to speed before anyone noticed, I got served the old site.

In the past, I’ve waited up to 4 hours for the right site to show up. I couldn’t wait that long last night, so here’s what I did to get the new site loading almost instantly.

Google Public DNS

When you sign up with an Internet Service Provider, they usually assign the domain name servers you use automatically. That means when you type http://blogdesignguy.com into your browser, your browser asks those servers to look it up. If those servers don’t know the site’s new location, tough luck. You’re stuck getting the old one.

What I learned last night, though, is that you can actually assign your own domain name servers. And if there’s any domain name server that should be up-to-date, it’s Google’s.

I set my domain name servers to Google’s Public DNS. As soon as I did, I began receiving the new site instantly which made it a lot easier for me to get Blog Design Guy back in working order.

Here’s how you do it:

Setting it up on a Mac

I use a Mac so these are the instructions I followed, as lifted from Google’s support page:

1. From the Apple menu, click System Preferences, then click Network.
2. If the lock icon in the lower left-hand corner of the window is locked, click the icon to make changes, and when prompted to authenticate, enter your password.
3. Select the connection for which you want to configure Google Public DNS. For example:
   • To change the settings for an Ethernet connection, select Built-In Ethernet, and click Advanced.
   • To change the settings for a wireless connection, select Airport, and click Advanced.
4. Select the DNS tab.
5. Click + to replace any listed addresses with, or add, the Google IP addresses at the top of the list:
   • For IPv4: 8.8.8.8 and/or 8.8.4.4.
   • For IPv6: 2001:4860:4860::8888 and/or 2001:4860:4860::8844
6. Click Apply and OK.

Setting it up on Windows

1. Go the Control Panel.
2. Click Network and Internet, then Network and Sharing Center, and click Change adapter settings.
3. Select the connection for which you want to configure Google Public DNS. For example:
   • To change the settings for an Ethernet connection, right-click Local Area Connection, and click Properties.
   • To change the settings for a wireless connection, right-click Wireless Network Connection, and click Properties.

   If you are prompted for an administrator password or confirmation, type the password or provide confirmation.

4. Select the Networking tab. Under This connection uses the following items, select Internet Protocol Version 4 (TCP/IPv4) or Internet Protocol Version 6 (TCP/IPv6) and then click Properties.
5. Click Advanced and select the DNS tab. If there are any DNS server IP addresses listed there, write them down for future reference, and remove them from this window.
6. Click OK.
7. Select Use the following DNS server addresses. If there are any IP addresses listed in the Preferred DNS server or Alternate DNS server, write them down for future reference.
8. Replace those addresses with the IP addresses of the Google DNS servers:
   • For IPv4: 8.8.8.8 and/or 8.8.4.4.
   • For IPv6: 2001:4860:4860::8888 and/or 2001:4860:4860::8844
9. Restart the connection you selected in step 3.

Similar Posts:

None Found

My blog is hosted on TypePad, but it seems like everyone is using WordPress these days. Should I switch to WordPress? If so, how do I go about doing that without losing the design and content of my site?

- Positively Present

It’s being reported that WordPress is now used by 14% of all websites on the internet. It is by far the most popular content management system on the web. There are thousands of plugins and premium themes available for it and millions of users to help you out if you hit a road block.

But is it right for you?

I absolutely love WordPress. It’s a wonderful product, but my advice to you is this: Don’t try to fix what isn’t broken. Have you already made TypePad a part of your workflow? If so, think about how much time and effort it will take to relearn how to use your own website. And then, even after learning how to use the new system, it will take many weeks to many months to return to the same level of productivity you had with the former system.

The only reason you should switch from TypePad to WordPress is if you are outgrowing TypePad. Are there features it sorely lacks? Is the system in general hindering the work you do? Are there limitations to how you can use it? If so, switch to WordPress (or any other better-suited CMS).

If you do choose to switch, it’s a pretty simple process content-wise. You can easily export your TypePad content and then import it into a self-hosted WordPress installation. Check out TypePad’s official documentation if you need help.

The design will probably be a bit more difficult, only because you’ll probably have to rebuild it. But with WordPress it’s simple. You can hire a pro to do it (like me, wink wink) or you can buy a kick ass theme like Headway. Headway will let you drag and drop your design. You don’t have to know HTML/CSS/PHP or any other exotic technical languages. You just use a mouse, drop down menus, color selectors, etc.

Either way, you’ll be up and running in no time.

As always, if you have a question or need free help with any aspect of your blog, contact me via this form!Similar Posts:

None Found

I want to give some life and colour to my blog and make it a well designed blog. I do not know how to proceed. Please help me.

- Surendranath Menon, thejus.blogspot.com

The first thing I have to say is that, in my experience as a designer, the simplest and quickest way to give life and color to your blog is to use WordPress. Why? Simply because WordPress is a bigger platform than Blogger or any other competitor. There are more designers actively creating awesome themes for WordPress than for any other blogging system.

For non-designers, this means a massive collection of high quality free and paid themes to choose from with new ones being released every day. For those who want to choose a theme and forget about it, WordPress includes a huge directory of free themes built into its administration panel.

For those do-it-yourself blog design types, there’s an awesome premium theme called Headway that lets you design your site as easily as you might lay out a word document. It comes with a Visual Editor that lets you drag, drop, pick and choose your design and the possibilities are endless. Headway simplifies my development process and allows me to focus on the details of the design rather than “making it work.” That’s why I use Headway on Blog Design Guy and every other site I own.

If you’re not able or interested in learning how to use a theme framework like Headway, but you want a great looking custom design, you should consider hiring a professional designer to create a custom theme for you. I offer custom blog design services to anyone in this category.

If you’re dead set on using Blogger, then the Template Designer is the way to go. To learn more about how to use the Template Designer, check out this Google help page. It should tell you everything you need to know.

If you need free professional help with any aspect of your blog, from the design to content creation to monetization, contact Blog Design Guy using the Free Help page.Similar Posts:

None Found