When you have an online marketing campaign of some form going, you may observe certain things on how people choose to engage. You may notice how they take little time in looking through what you have, most likely just glancing, before moving on. That is where the call-to-action (CTA) button comes in, which is meant to catch people's attention and let them be able to engage by just clicking on a button.
However, CTA buttons aren't just about being big in size and having an eye-catching color. What is written is just as important. Typography isn't something most people associate CTA buttons with, but it is one of those things you wouldn't think of as important until you actually see it done wrong.
Importance of Call-to-Action
Everything you do in marketing is all for conversion, and that means there must be a Call-To-Action telling your audience to interact with you now that you have done all you can for them. You have provided value to them, so you can have them like, share, subscribe, register, and so on, if they want more of the same later on.Â
For you, the CTA is about either directly converting or gathering information (i.e. email addresses for your mailing list) that can later be used for further marketing to convert your audience. It also lets you know how many of those who view your content are willing to engage with you, which indicates your conversion rate.
Perhaps some of them are willing to engage even without being told to do so, but asking nicely makes it better as it reminds them that they can do something in return for the value you have provided. Marketing is in itself an elaborate process of asking nicely, so the CTA has to be there in some form at the end of your content.
1. Dropbox
Simple and to the point, Dropbox's website make use of a wide CTA button in blue that goes with their branding. On the button, it says "Download Dropbox" and not just "Download." Not only does it make better use of all the space, but it also says clearly what you are downloading when you click on the button. It makes no room for vagueness at all; you are definitely downloading the Dropbox software when you click on it.
The font used here isn't in bold. That is not usually necessary when the button itself can be easily seen, especially one as wide as this. When everything else in your site design isn't too distracting, this is usually enough.
2. Netflix
There are a lot of good things going on with Netflix's branding and design, and its use of the CTA button is also noteworthy. Like with Dropbox, the button here is in the same color as that of Netflix's branding. It is also only as wide as it needs to fit the text. Amid the dark background on the front page, it can still be easily seen.
As for the text itself, "JOIN FREE FOR A MONTH" is in all uppercase to make the message clearer. All Netflix ÂÂÂwant from first-time visitors is to give their service a try for a whole month as they are confident enough that their wide selection and high-speed streaming will be more than enough to win people over anyway.
3. Spotify
This one is rather interesting since there are actually two CTA buttons. Both of them are simple, but their message is undeniable. They both entice the audience to make use of the Spotify music streaming service. The CTA button that is in color is for the free service. That is what most people would go for.
The second CTA button is for the premium service. While it isn't colored like the CTA button for the free service, it is just as visible to make it seem equal to its counterpart. As for the font used, it is in all uppercase and semi-bold to make the messages on the CTA buttons readable.
4. PayPal
This site has something similar to Spotify's CTA buttons. PayPal also has two of them, but they are one on top of another instead of side by side. The one on top lets you register a PayPal account for free, which is pretty much the service's selling point. The one below it is for entrepreneurs who would like to use PayPal for their businesses' online transactions through PayPal.
Both CTA buttons have their text in bold, but not in all uppercase. You can see that most on the front page has nothing in all uppercase text, not even the brand name. It was done that way to make it consistent with the rest of the site design.
5. Skype
It also has dual CTA buttons, and they are side by side like with Spotify. However, the highlighted button is on the right instead of the left. It lets you download the Skype program for your computer. The one on the left is for using the web version of Skype in case you need to use it badly and don't have the program installed on the computer you are using. Either way, you would be making use of Skype, which perhaps explains why they oriented the buttons this way.
The way the font is used for the text in the buttons is similar to that of PayPal, but this one isn't in bold either. With the way the buttons are, size and orientation, they need not be in bold.
6. Amazon
The CTA button for Amazon doesn't stand out too much. It is a regular button that you will notice it if you are actually looking. It is not in a color that grabs your attention. Perhaps this is because if you are in Amazon, you are already in some online shopping anyway. Also, the CTA button says "Sign in securely," which puts emphasis on security. This is very important for online shopping or anything else that requires you to enter personal and financial information.
As for the button itself, the message is written like an ordinary sentence. It show a statement that Amazon sincerely intends you to be able to sign in securely through its service. The button itself is wide—more than necessary for the message—to make it more visible.
7. Birchbox
The site has a theme going on, and the CTA button itself further piques the curiosity about the Birchbox. The copy convinces the audience to watch the video, then the CTA button lets them go on to get a Birchbox of their own if they are interested.
The CTA button is in the same color as the rest of the background (it's transparent), and both the border and text are in white. The text is in all uppercase and semi-bold to be more readable. The call-to-action itself is not as important as making the audience curious about the Birchbox. Â Making them subscribe eventually is the next step.
8. J. Crew
The design for this site is pretty interesting. There are actually two CTA buttons here—the one near the top of the page, just below the copy that says "This is worth the scroll" and one at the very bottom of the page. Visitors can just click on the first CTA button, but they can then heed what the copy says and scroll to the bottom of the page, where they can find the second CTA button.
Scrolling down lets them see all the different scoops of ice cream on the cone, and the cone looks like an arrow pointing down the second CTA button. The first CTA button says "(or just click here)" in all uppercase to accompany the copy, while the second CTA button just says "GO" in big bold letters, which can't be any clearer.
9. Twist
The position of the CTA button here is a bit different as it is in relation to the GIF background with the lamp turning on and off. That conveys how much of it is about the light bulb, and the copy points towards the airplay speaker within the bulb. With the quote by GQ Magazine in bold, you get the gist that it is about the technology of having speakers in light bulbs.
The CTA button then shows up in the violet/purple color of Twist's branding and says "SHOP NOW" in all uppercase letters. When a CTA statement is as bold and direct as "Shop now," it is apt to go all out and be as clear as possible with that call-to-action.
10. Muzli
This design is more on bold colors amid a minimalist layout, making the CTA buttons and other elements more pronounced. The colors themselves don't seem to overwhelm everything else as there are more than enough space in between everything else.
The CTA button is quite visible in Muzli pink and says "Stay Inspired" on it. While that instruction may seem rather vague, the site itself is about design and there is social proof on the banner that tells you how many people have shared Muzli, which strongly supports the CTA button.
Conclusion
There is no hard-and-fast rule when it comes to typography for CTA buttons. Designing the perfect CTA button for you is full of nuances that must be taken into account in order to get one that works. Typography can seem pretty vague at first, and only by understanding what you really need and want can you come up with a design choice that makes for the best CTA button for your marketing.
If you have any ideas on good typography for CTA buttons, please feel free to leave a comment about it below. Thank you very much.
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.