WooCommerce is by far the biggest player in the WordPress ecommerce space. It has its own robust economy of premium add-ons both by its creators and an impressive array of third party developers. So much so that it can be easy to catch yourself thinking that every add-on worth having is premium. But like WooCommerce itself (and WordPress of course) quality/usefulness and a $0 price tag are not mutually exclusive. There are plenty of free WooCommerce plugins out there that can enhance your store without requiring you to spend a dime. In this post we’ve rounded up eleven we feel are worth checking out.
1. WooCommerce Multilingual
Off the bat, you should know that expanding the languages your store is available in can increase sales and conversions. The WPML project is fantastic for that, and this plugin will let you make sure that your site reaches absolutely as many people as possible. I think the best part of this plugin is that it not only shows the pages on your site in a new language, but also allows emails that you sent to your customers to be translated, too. That’s good stuff.
You want people to come back to your site. While one-off sales are okay, the real money is with repeat customers. And what better way to get repeat customers than to give them a chance to browse your store and throw whatever they want to remember onto a wishlist? It works for Amazon, so it will work for you, too. Just install the YITH WooCommerce Wishlist plugin and before you know it, conversions and return visitors will be soaring. Plus, the image they use to promote the plugin uses an elegant black dress. I say their word choice is an omen.
If you’re like most shoppers, free stuff gets you to buy more than you’d normally buy. Just the prospect of it being free is too tantalizing to miss. Even more than that, the best way to give something for free is to make sure they keep coming back to your store over and over again. That’s why rewards programs are so popular. With the WooRewards plugin, you can host your own rewards program for free. Just like the wishlist above, if you can get people to come back for any reason, they will most likely buy more stuff. And with something free dangling like a carrot on a stick in front of them, too, it’s a one-two punch that’ll knock ’em out every time.
Remember how one of the most annoying parts of ecommerce is the abandoned cart? Well, that’s not an issue with WooCommerce Direct Checkout. Just install this baby on your site, and you won’t have any abandoned carts anymore. Zero. Zilch. Because you won’t have a cart at all. You can direct your customers directly to checkout with this plugin so that their impulse to buy is streamlined through the process perfectly. It’s totally free to use, but if you want a more robust experience, the developers have a pro upgrade you can opt for.
Just like it says, this plugin puts a cart icon in the menu of your WordPress site. Some themes don’t play well with WooCommerce, but that shouldn’t be a problem with this one installed. Just activate it, and you have a customizable spot in your menu bar that lets your customers keep track of everything they’ve set aside to buy. And if you don’t want it just in the menu bar, you can use a shortcode to render the cart wherever you want — widgets, footers, blogs, anywhere.
If there is one lesson we can learn from the current state of the film industry, it’s that there’s a lot of money to be made outside of the United States. So make sure that your customers know what they’re really paying by using this plugin. When installed, this plugin lets your users see exchange rates for the price you’ve set and their desired currency. No more guessing how many Euros equal how many US Dollars, or how many Ruples equal how many GBP. The free version only supports 2 currencies, but that may be enough if you have a dominant country in addition to your native one.
Running an ecommerce store is fun and games…until it’s not. The worst part about an online business (really, any business) is keeping up with all your paperwork. Thankfully, there is a slew of software out there to make it better for you, and this is one of the top options. With this free WooCommerce plugin, you can generate PDF invoices and packing slips (see why it’s named that now?) quickly and easily so your business keeps moving foward and doesn’t have to slow down while you push around a lot of paper.
PayPal and Stripe may be your go-to payment methods for WooCommerce, but you should absolutely think about Amazon Pay, too. Since roughly everyone in the world shops on Amazon, using this free, official extension will make your store run a bit more smoothly. It lets your users integrate with a payment processor that they are already comfortable with and trust, and you get the same benefits because you’re dealing with a gateway that’s based on one of the biggest infrastructures in the world. The only downside as I see to this (and this is a minor quibble) is that users can’t use rewards points or gift cards for purchases via Amazon Pay. As a consumer, that stinks, but as a vendor, it should be no different than taking PayPal or Stripe.
I don’t know what it is about image magnification, but there’s just something that screams a site is professional if you let users zoom in on your products. Installing this plugin makes it a breeze, and your shop will look a ton more professional immediately. You can upgrade to a pro version if you want more customization, but you probably won’t need to.
Everyone loves gift cards. Whether they are getting free money to a favorite shop (yours, obviously) or picking out an easy present on the go that can be given immediately, people adore gift cards. If you have this plugin installed, your customers will have that option, and even if they don’t find the perfect gift for that special someone, that special someone can pick it out for themselves. The downside to the free version of this plugin is that while the gift cards are available to purchase on your site, you have to manually send the codes to the recipient. For smaller shops, that may be a good thing, as you have a bit more granular control, but for later sites, that just isn’t possible to keep up with. Other than that, it’s easy to use and set up, so you should definitely take a look.
To round it all out, let’s give your customers a reward for being so darn amazing. With the Coupon Shortcodes plugin, you can designate anywhere on your site as a location for your customers to get a code and apply it at checkout. While that’s awesome, it’s integration with Coupon Countdown is what really makes it cool — you can do a limited time offer for only specific parts of your site (maybe 404 pages or a sales page).
No matter what kind of store you run, there’s a handful of these free WooCommerce plugins that should probably be installed on your site. Sure, not everything will work for everyone, but even the ones with limited functionality can work as a demo to see if it’s the right fit for your store. Given that all these are free, installing some of them can only gain you sales, right? Happy selling!
Are you having trouble with those pesky Facebook banner dimensions? Is your banner or cover photo just not looking right? We’ve got you covered.
Your Facebook cover photo says a lot about your brand. For a business to thrive online and have a social presence, it needs a good looking Facebook Page. No matter if it’s a neighborhood lunch spot or an international conglomerate. Your Facebook page needs to look inviting and recognizable when a client visits and the first thing they see is the cover photo or banner at the top. Getting the banner to look perfect takes a little bit of work and the right kind of attitude.
If you have ever created your own Facebook banner or cover photo you will have noticed that it doesn’t look the same on desktop and mobile. The sides get cut off on mobile, taking important visuals or words along with it. In this article, we will look at the best practices for getting the perfect Facebook cover photo every single time. Additionally, we will look at mistakes to avoid and things to never forget when designing your Facebook banner.
Facebook Banner Dimensions for a Perfect Fit
The most important thing to remember when creating a Facebook banner or cover photo is the way the size changes from mobile to desktop. In the image below you can see different sections around the main space called the “SAFE AREA.” It’s in this area where all important information should be placed, that way it shows up on both desktop and mobile.
The official size for a Facebook banner or cover photo is 820px by 360px. If you have created one before, you might have noticed that sometimes, Facebook makes your perfect image look blurry. That’s why we like to use a larger graphic with the same aspect ratio. The aspect ratio of an 820px by 360px graphic is 2.28, so to be sure that it looks perfect when you upload, you can create it at 1230px by 540px.
Common Mistakes to Avoid
It’s easy to make silly mistakes when creating a Facebook banner. Unfortunately, these seemingly tiny mistakes can really make a difference when it comes to how people react to your Facebook cover photo. Let’s look at some of the most common mistakes you should avoid when making a Facebook banner or cover photo for your business.
Too Much Text
The old rule of “no more than 20% text” isn’t an enforced rule on Facebook cover photos anymore. Nevertheless, you should still try and keep the text to a minimum. Be mindful of the number of words you use, but mostly how much space they fill up in the Safe Area. Use only the words which are completely necessary to send a message.
Too Much Clutter
Just how you can mistakenly fill up space with too much text, it can also happen with a combination of text and visuals. Restrain from making your Facebook cover photo way too cluttered. There is no need to put tons of things in your Facebook Banner, it just has to look good. If you are promoting a specific sale or offer, only add the most important information and let the CTA button do the rest of the work.
Unappealing Color Combination
Ugly color combinations are instant visual repellents. Try not to use random colors in the graphics for your Facebook cover photo. Your best bet is to either use your brand colors or to find some appealing color palettes on Colorhunt. Simply copy and paste the hex codes from the color palette you chose to your graphics editors. If you are using a photograph, sample some colors from the image to colorize text. For visual graphic styled Facebook banners, stick to no more than three or four colors at a time.
Too Little Too Late
Another terrible mistake is to change your holiday banner at the wrong time. A good rule of thumb is to change your holiday-themed Facebook cover photo a week two before the actual holiday. If you sell products online, then you have to be especially aware of upcoming holidays so that you can promote your sales with enough time.
Best Practices For Your Brand
Now that we’ve seen the most common mistakes which you should avoid at all costs, it’s time to look at what you should always be doing. As long as you follow certain parameters, your Facebook cover photo will work for you and your brand.
Stay on Brand with Colors, Fonts, and Message
As a brand, it’s your responsibility to stay consistent from the web to social media and beyond. Your brand style guide should be the first point of reference when creating a new Facebook banner or cover photo. Use your branded colors and branded fonts. Maintain the message and the feel of your brand at all costs. Take a cue from the Nike Facebook Page, they visualize their brand with their trademark slogan; Just Do It.
Use a Focal Point to Bring Attention to The CTA Page Button
Before we look at adding a focal point for the Page button, let’s make sure you know what it is. Underneath the banner is your trusty CTA Page button. You can change it according to what you want it to do, from ‘shop now’ to ‘learn more’ and a bunch of other options. If you haven’t customized this button yet, it will say ‘Add Page Button.’ Click on it to add whichever option suits your company best.
To customize an existing CTA Page button, hover over it and a little edit pencil will show up. Click on the pencil and choose ‘edit button.’
Now that you know the power of this little button, it’s time to call some attention to it. Add a little something on the bottom right corner which will grab the viewer’s attention. The folks at Superfly added a black rectangle with their website URL right above the buttons. They don’t expect you to copy that URL and paste into your browser! You just have to click the Shop Now button. You can achieve a focal point to the button in different ways, with photography, graphics, and even arrows!
Use High-Quality Images Which You Have Rights to
Always use photography which you have the rights to use. Not only does it follow Facebook’s guidelines, but it’s also common sense. Please don’t use imagery which you found online and simply pasted into your banner, this can get you in trouble! Use stock photography which you have paid for or free stock images from sites like Unsplash. Better yet, use your own photographs of your own products! The Pepsi Facebook banner below is a great example.
Try Using a Video Instead of a Photo or Graphic
Why not try a video instead of an image? The process to upload a video to your banner is the same as adding an image, just follow the same size guidelines. Make sure all important movement in the video is inside the ‘Safe Area’ and it’s ready to go.
Add a Description with Links and Pin a Relevant Image to The Top of Your Page
Last but not least, when you upload a new Facebook cover photo or banner, always add a description with relevant links. These will not be obvious at first glance, but when someone clicks on the image they will be able to see all the information you added. For example, the current banner for Starbucks is about the Born This Way Foundation and once you click on the banner, you see all the links and tags related to it.
Likewise, Starbucks also has a pinned image to the top of their page which gives a lot more information about the foundation in an animated GIF. What this technique does, is create a full-scale effect for your Facebook Page. When someone lands on it, they can see your three important visuals; the logo, the cover photo, and the pinned image. If everything is optimized, along with the page button, they have plenty of choices to interact.
Having an optimized Facebook page these days is not that hard. Use the Facebook banner dimensions template above to help you create the perfect cover photo. Avoid common mistakes and follow the best practices to create a Facebook banner, and you will have a great looking cover photo in no time! Remember to customize your page button and don’t forget to upload your graphic with a relevant description.
There’s a high chance that if you’re reading this, you work on a computer for most, if not all of the day. Even if you don’t, there’s still a high chance you’re looking at a screen of some kind for the majority of the day. And that makes you tired. More specifically, it makes your eyes tired. Which them stresses the rest of your body. It’s likely a cycle we all know a little too well. We have steps, however, that can alleviate and even prevent this kind of eye strain so that your job and habits don’t have to negatively impact your overall well-being quite so much.
1. Blink More
Okay, so the actual solution is a little more complicated than that, but in the end, blinking more often can really help prevent eye strain. Even those minute flashes where you’re eyes are covered give your brain a chance to rest. And that time adds up over the day. It’s literally why when you’re strained and stressed that you can simply close your eyes and feel an almost immediate sense of relief. (You can actually tell your boss “I’m just resting my eyes, not sleeping at work” and not be lying!)
Additionally, blinking keeps your eyes lubricated. Not blinking means that your eyes will dry out more often. If that’s something that you’ve noticed bothering you, get some eye drops to keep at your desk to moisturize them often. While that is just treating a symptom of the eye strain rather than rooting out a cause, relief is relief.
Unless you’re sure that you can consciously make yourself blink more often than you normally would (spoiler: you can’t), you need to make a few changes in your workstation and habits. While change can be hard, making these changes won’t be. They’re both simple and easy. Many of the other tips will cause you to blink more often as a by-product, eliminating multiple stressors at once.
2. Change Your Font Color, Size, and Family
If you’re a content creator or web developer, you probably know that what font you choose makes a drastic impact on how much eye strain you endure. Many font families are not ideal for constant and repeated use. What looks great in a screenshot or is fine for a 3-minute-read article might not work for an 8 hour shift of programming or writing. Choosing a font other than Arial or Helvetica (blasphemy, we know) might make more of a difference than you know. The kerning, spacing, and even shape of various fonts can increase readability and make it so that you don’t have to work as hard to decipher the characters.
On top of that, color and size (both independently and in concert) can be one of the largest factors of preventing eye strain. If you have a high-resolution monitor, there’s a good chance that your default font size is pretty small. On top of that, a lot of what you’re reading online and in other places might be low-contrast (light text on a light background). When this is the case, our eyes have to work overtime.
So to fix that, you don’t have to lower the resolution of your screen. No one wants you to give up your screen real estate. Instead, increase the default font sizes in your OS, your code editor, and adjust different web pages in your browser to accommodate larger text. (Usually CTRL/CMD and +/- will do the trick.)
3. Turn Your Brightness Down
This one’s tough for some people, us included. Whether it’s a phone screen, laptop, or the circle of computer monitors you have around you, the brightness is probably way too high. While doing so absolutely makes the colors pop and the whole experience generally much more aesthetically pleasing.
But it also strains your eyes at an accelerated rate. You will need to find the balance of brightness that works for you. If the monitors are like lamps in a darkened room, you might have a problem. But if you’re straining to see and the OS appears dim and dull, you’ve gone to far the wrong way. Once you find the right brightness, though, your eyes will be much better off.
Also, if your office or workspace has fluorescent lighting that reflects off of your monitor, you can get screens and filters that you can affix to it so that you can eliminate external brightness and glare, too.
4. Dark and Reader Modes
You also have access to Dark Mode in a lot of apps to make reading easier, and adjusts the brightness on a software level. MacOS and iOS even have them built in. This gives you a darker, less-bright screen with a decent contrast ratio of lighter text on darker backgrounds. It’s easier on the eyes in both daytime and in darker environments. We highly suggest working this way. Dark mode has saved everyone at Elegant Themes a lot of money on headache medicine over the years.
You can also try programs like Dark Reader to make any website or app appear in dark mode, whether they support it natively or not. Also, most browsers (mobile and desktop) have a “reader” mode where the text size, font, and color palette are adjustable with other non-essential elements not rendered. Take advantage of these tools. Your eyes will thank you.
5. Consider Your Posture
Where you are in relation to your screen plays a pretty big role in eye strain, too. Not to mention muscle strain and shoulder/neck aches. You want to be looking at your monitor front-on at eye level. Or, well, slightly below. You shouldn’t have to look up or down to see it. Your neck should be neutral. Keep this in mind when working on a laptop because you’re going to have your head titled down a lot of the time. Not only is this bad for your posture, most screens have a slightly different look from various angles. Colors shift a little, glare hits it differently, and so on.
You will also want to make sure you’re the right distance away from your monitor. You ideally want to be between 20 and 27 inches away from your screen. It differs from person to person because of monitor size and setup. Generally, though, you want to be able to just reach out and touch the screen with the tip of your finger from your neutral sitting position. If you keep it at this distance, you should be able to take the entire screen into view and not have to search all around for points of interest, saving your eyes motion and wear.
Sitting too close to the screen won’t make you go blind, unlike what our parents told us when we were kids, but it can make your eyes work overtime. And that leads to easily preventable eyestrain.
6. Use Everything Anti-Blue
While the jury (read: science) is out on just what effect blue light has on your health and eyes and sleep, the evidence does point toward limiting your exposure to it as being good for your eyes. Most phones these days have a “night mode” which effectively adjusts the color temperature of the screen after certain hours. You can generally adjust them for any hours or intensity that works for you. It may seem a little odd warming up your screen’s overall tone, but you get used to it quickly, and it does make long hours of looking at the screen easier and less taxing.
Additionally, there are blue-light filters that you can hook to your monitor like the anti-glare ones we mentioned above. You can buy special “computer glasses” that supposedly filter out the light, too, which are fine if you wear contacts or don’t need glasses. For those who need prescription lenses, however, you can ask your eye center about getting the lenses covered in an anti-blue light coating that does the same thing. And bonus, sometimes that coating even makes your eyes flash purple to some people. (No kidding. It’s very surreal for them.)
Eye strain might not sound like a big deal, but anyone who deals with it can tell you just how intrusive it can be. If you have never experienced it from spending too much time in front of a screen, consider yourself lucky. But be proactive about making sure that you don’t. And if you’re a constant sufferer like many of us, it only takes a little effort and a few tweaks to make some high-quality adjustments that will make a big difference in your overall wellbeing.
The last thing you want your visitors to experience is a slow-loading website that chugs along and doesn’t deliver the information or services that they expected. If you’re trying to sell a product or even just get people to read your blog posts, then a slow website speed is going to cause major issues that will create a bad first impression.
In this article, we’ll take a look at a few simple and easy steps to help you improve your website speed so that you never scare off potential viewers.
1. Compress files
If you’re using a lot of images and videos then it’s a good idea to compress those files to ensure that they’re not taking too long to load. This is especially noticeable on mobile devices when network coverage can be a little flakey.
2. Choose the right hosting option
When hosting a website, you typically have a few options; shared, VPS or dedicated hosting.
Shared hosting is the cheapest and you’ll share resources like CPU, hard drive space and RAM with other websites. This means that you’ll occasionally get slow service if other sites are utilizing more of those resources.
VPS hosting is also a form of shared hosting, but you won’t actually share the resources. Instead, you’ll have your own dedicated resources that are guaranteed.
Dedicated hosting is having your very own hardware that is entirely yours. You get complete control over it and it’s the most expensive option, but also the most customizable and the one that is least prone to performance issues.
In short, avoid shared hosting and go with VPS hosting if you’re on a budget, but choose dedicated hosting if you know what you’re doing and need a lot of space and control over your website.
3. Enable caching
Caching basically means storing parts of your website’s content on the user’s device so that when it loads the next time, it’s faster. Enabling this will speed up the user’s experience after the first visit, making it a great way to speed up your site.
4. Using a CDN
A CDN, or content delivery network, helps users download your content by placing it on a global network of servers that are accessed depending on the location of the user. This means that files will download faster because they’re hosted on a server that is closer to the physical location of the user, instead of having just a single location where they are accessed.
5. Lower plugin numbers
If you’re using WordPress then you’ll have probably noticed that you can install plenty of useful-sounding plugins. Unfortunately, these contribute to slower loading times and it’s essential that you do what you can to minimize their use while still retaining functionality on your website.
6. HTTP requests
When you visit a website, an HTTP request is made for every element that you have on your page like images, stylesheets and videos. You can optimize your website by reducing the number of HTTP requests. This is generally done by removing any requests that are unnecessary, such as images that aren’t displayed or can be replaced with a more efficient option.
If you’re the kind of Photoshop user who primarily opens the software to resize and crop images, you might never touch the Brush tool. However, if you’re in Photoshop day-in and day-out, Brushes are likely to be your best friend. Having as many options as possible will undoubtedly make your life a little better. And if those options are free, then maybe it will be a lot better.
While many brushes emulate real-world artists’ tools, not every single one does so. Dispersion is a free Photoshop brush that gives you the unique effect of shattering (or dispersing) parts of your work. Doing an effect like this by hand would be incredibly time-consuming. But with Dispersion, a few clicks and strokes…and you’re good to go. This particular set comes with 20 high-resolution brushes for pretty much anything that you could want to do with it.
It may have been given a bad rap in pop culture lately because of its overuse in some movies, but lens flare is an effectthat can really take a design to the next level. Using it sparingly and effectively in your designs can give a feeling of peace and calm or even of adventure and excitement just by placing a single flare in a work. Don’t overdo it with this set of 20 high-res brushes, and your work will undoubtedly impress your clients.
Superheroes are everywhere these days, and at some point, a client is going to want a comic- or superhero-themed design. You might as well prepare yourself for that by downloading this 15-brush set, aptly called Comic. There is no way that having this set of brushes won’t save you time and effort.
The creative nerds over at Creative Nerds have put together some delightfully pretty spray paint-themed free Photoshop brushes for you to download. This one does cost you an email address to unlock the freeness, but it’s worth it. While PS does come with some spray brushes, they can be pretty limited. The nerds have done a great job of letting your brush strokes more realistically splatter the digital canvas with the speckles that give real spray paint its allure.
If spray painting isn’t your style, but you really like that abstract look, maybe the Watercolor Splatters 32-brush set will work for you. Even in more specific and detailed work, you can use a splatter brush for accent and distressing.
Stone 4 is actually full of 15 free Photoshop brushes. Instead of having to deal with masks and layers to achieve a stone-like finish, wouldn’t you just prefer to press B and pick a brush to do it for you? We certainly would. In terms of a time-saving brush that will certainly improve your quality-of-life, Stone 4 doesn’t disappoint. While some brushes and styles go in and out of trend, having a solid, stone brush that you can turn to never goes out of style. Clients will always need this kind of look to emphasize professional power and authority, so grab these 15 and help empower them. There is also a Stone 1-3, too. Stone 3 is extra pretty, too.
Much like Dispersion at the top of the list, Shattered gives you a fantastic effect that can improve your quality of life and give clients a unique design in much less time than hand-creating every shard. While we generally see this kind of effect in logos and advertising, there are a lot of uses for it in web design that can create some unique page transitions and effects. And at least with this broken glass, you don’t have to worry about cutting your fingers.
Smoke is one of those elements that you can use in pretty much any design for any reason, and it would fit. So grabbing Smoke Brushes is a no-brainer, we think. Whether you’re enhancing the mystique of an evening’s photoshoot, giving website users a tour of mystery, or adding wispy whimsy to lettering or illustration, this set of free Photoshop brushes will be right at home in any designer’s toolbox.
Retro technology is everywhere right now. What is old is new again, and what is new again at this moment is ’80s-style technology. And while for its day, the tech was amazing, we’ve come to associate the occasional fuzzy screen and flicker or glitch with the time period as well. Because it’s so trendy and popular, keeping a few brushes to emulate the glitches of decades past would not be a bad idea. In fact, it would be a good one. Additionally, this isn’t the only set of Glitch brushes available. As you scroll down the page for this particular set, you will find over a dozen variants in the series to create whatever kind of computer problems or corruption your clients might need.
In life, glitter can be a pain. While it’s gorgeous and adds sparkle to literally anything, that sparkle is sometimes hardimpossible to get rid of. Not true in the digital realm, where you can add as much glitter to your designs as you or your clients want. This is the one time that it’s okay to glitterbomb someone or something. There’s no clean up required, and there won’t be any tiny pieces stuck to places you don’t want. With these fabulous free Photoshop brushes, any design you create will shine as bright as you can imagine.
When designing for the web, you have to keep one thing in mind at all times: readability. It doesn’t matter how great the design is, how gorgeous your layout is, or how genius your use of color. If people can’t read the words on the screen (and this is assuming there are words on the screen, of course), the website cannot serve its function. Three of the most important elements of readability for text are kerning, tracking, and leading, though many people either get them confused or simply don’t understand how to use them effectively. We intend to fix that today.
Kerning, Tracking, and Leading
If you boil these three down to the absolute fundamentals, you’re looking at the spacing between characters on both the X and Y axes. Digging in, you’ll see there’s more to it than that, but in essence, you’re looking at the relationship between text characters. It’s important to understand the relationship between these three attributes because good design and readability depend on your using them to the best of your ability.
And that comes with time and practice. But once you start paying attention to them, you’ll notice how kerning, tracking, and leading are used both effectively and poorly on everything you read and see on a daily basis. Let’s dig in.
Adjusting Kerning, Leading, and Tracking (and More!)
Actually, before we dig in, let’s go over how you change and adjust these settings. While most word processing programs have options for adjusting them, most people won’t ever need to when writing copy or typical text. It’s when you’re designing text that it becomes more of an issue, so programs like Photoshop, Illustrator, etc. will have the options you need most.
In the Adobe products, you just have to open up the Text Layer Character Panel, and you have everything you need. The V/A is kerning, the VA in a box is tracking, and the underlined, vertical A’s are Leading. You can also adjust strikethrough, weight, size, super/subscript, and so much more in this panel. It’s worth getting used to keeping this open.
Just place your cursor where you need to adjust the spacing and go.
What is Kerning?
Let’s begin with kerning. Kerning is the simplest of the three, really. It’s the space between two side-by-side characters. In a word, you can have variable kerning because the space between the first two letters may be different than between the last two (and so on).
In monospaced fonts, each character takes up exactly the same amount of horizontal space with no overlap. The A is the same width as the B as the J as the K. Adjusting the kerning between these letters tends to be easier than variable spaced fonts, where the letters might overlap as well as print at different widths.
In the example above, we have three lines that were copy and pasted using the monospace font Courier New. The top row’s kerning is set at 0, which is the default and uses whatever spacing the font designer chose. The second row is set equally between letters (and spaces) at 200. As you can see, the spaces are uniform between characters across the line. Finally, the third line was kerned at random with both positive and negative spacing within each individual word. As you can see, each character can have different kerning on each side.
What is Tracking?
Tracking is similar to kerning, but it’s not kerning. Where kerning is the space between two individual characters, tracking is the uniform space between each individual word or line. Instead of worrying about how things are put together on a letter-by-letter basis as with kerning, you make sure the entire line is uniformly spaced. Looking back at the earlier example image, the second line could have been done in a much easier way.
What I did for the kerning was to place my cursor between each individual character and adjust to 200. I essentially tracked the whole line. Which is what you should do. Simply highlight what you need to track and adjust it in the Character Panel.
Be aware, however, that some fonts and scripts may become unreadable as the tracking is adjusted.
Handwriting fonts and cursive typefaces are set with specific kerning, and if you adjust the tracking, you will get gaps in an otherwise unbroken line. Or going the other direction to compress the lines, you might simply make the script unreadable.
What is Leading?
With Leading, you’re no longer dealing with spacing between characters. Leading is the space between lines.
Effectively making use of leading lets you effectively make use of whitespace in your designs. Cramped lines — even with correct and well-done kerning/tracking — can make a miserable experience for readers.
In some places, you might see leading called line height, but they’re roughly the same thing. One good rule of thumb is to make sure that you leave at least a little space above and below your characters. As you can see in the top example, a 40px font has a 48px line height. That means that no matter what, there will be spacing between the letters. If you set that at or lower than the font size, you will get character overlap.
Additionally, this is the height of the line that the characters sit on. This is not the height of the character. Just as kerning and tracking don’t make the characters fatter or thinner, tracking doesn’t make them shorter or taller. It is simply the space around them.
As you can see, however, the options under the kerning/tracking in the Photoshop Character Panel adjust the width/height of characters independently of kerning, tracking, and leading.
Photoshop/Illustrator Keyboard Shortcuts
The only downfall of the Character Panel is that it gets to be pretty annoying when you’re needing fine adjustment. Thankfully, there are keyboard shortcuts that make kerning, tracking, and leading an absolute breeze to use.
These shortcuts are for the Adobe Creative Cloud suite, so they might be different in Gimp or Paint.NET or another program.
Kerning – With the cursor between two characters, hold ALT (or Option on Mac) and use the left/right arrows to adjust the kerning
Tracking – With the word/line highlighted, hold ALT (or Option on Mac) and use the right/left arrows to adjust the tracking of the highlighted text
Leading – Highlight the lines you want to adjust, hold ALT (or Option on Mac) and use the up/down arrows to adjust the space between lines
While you can place your cursor or highlight the text and type values into the Character Panel, the keyboard shortcuts make the whole process much less tedious and time-consuming. Plus, you get more granular control, so you can make better designs that way, too.
(As an aside, if you aren’t using Photoshop/Illustrator/Premier, etc. keyboard shortcuts regularly, we highly recommend learning, as it makes your workflow much smoother, more enjoyable, and more productive, too.)
Kerning, tracking, and leading are fundamentals of readable text in web design (and design in general). Learning the difference and how to use each of them effectively will make you a much better designer. It may seem a little odd that something as simple as the spacing between letters and lines could have such a large impact, but once you deal with it for even just a little while, you will never look at websites, advertisements, logos, or billboards the same way again.