Best Typography for CTA Buttons
So you’ve done everything you can to catch the audience’s attention, gave them as much value as you can with your content, and made a good first impression. After all that, you must then lay down your call-to-action so they may engage with you on your site and on social media.
You can tell them to like and follow your Facebook and Twitter profiles, share your content, get their opinions, buy your products, or so on. But it’s not just about asking them to do those things, but also how you ask them as well.
Crafting a call-to-action is an art in itself, and getting it right involves processes like A/B testing and a good bit of trial and error. A good call-to-action is the sum of its parts, and a great way to help make your audience respond to it is to put it all into a button.
What You Need to Know About Call-to-Action Buttons
The call-to-action button prompts the audience to take a specific action by condensing it into a button they can click once for convenience. The button can then lead them to wherever you wish to go, whether it is to subscribe to a channel, take a look at your products, register for an event, and so on.
That seems simple enough, but the way the CTA button looks and conveys its message is important. It must draw attention to itself and compel your audience to at least look at it. But while it must be attention-grabbing, it must also complement the rest of your design so it doesn’t stick out too much like a sore thumb and ruin how your site looks.
Also, the CTA button may be supplemented by accompanying information on what the call-to-action is about. The audience would somehow appreciate it if they are told what they are getting themselves into, after all. Being understood means readable text, which is where typography comes in, and it is important for CTA buttons as well.
Examples of Good Typography in CTA Buttons
Starting off with a simple but effective one, Uber’s CTA button on their website is supported by a short copy that tells users why they should click on the button. It is 11 words in total (LOG IN and SIGN UP), telling users they can get transportation quickly through the Uber app, and the button lets them sign up for an account.
The button itself is in blue with a label that says “SIGN UP” in upper case but is not typed in bold. The copy itself isn’t that groundbreaking, but it does make a difference as it is clear and concise, and that’s all it has to be. Also, the font used is both readable and consistent with the rest of the website design.
2. Flex Studios
The best CTA buttons are the ones that both tug on people’s emotions and stick out from the rest of the page. That emotional trigger that gets them to click on the CTA button is dependent on the copy that supports it.
This CTA button says “BOOK A CLASS” with an arrow beside it. The arrow tells them clicking on the button lets them go to whatever is next, while the label implores them to do something by booking a class to Flex Studios.
The copy above it states where the business is located and what they specialize in. It indicates if you are around the area and that location is very accessible to you, making you want to start getting fit and healthy by booking a class there.
The green color of the button coincides with Flex Studios’ branding and the font is much of the same with Uber’s CTA button. What sets it apart is the arrow on the right of the CTA, and the CTA itself is direct and concise.
This CTA button is different from the previous two. It is not in a prominent color, but the copy stands out more. That is because its call-to-action is merely for more information. For a website of a medical company like this, it is appropriate because sending information is the main goal.
B2B healthcare provider medCPU provides technological solutions for hospital needs & operations. They know their customers may be limited to medical professionals who most likely would not be adverse to reading lengthy articles related to information they need. Therefore, having a transparent CTA button with relatively small text that says “HOW IT WORKS” shouldn’t be a problem, even if it seems to be breaking the “rules” of what a good CTA button should be.
The CTA button for Crazyegg is quite specific because it is not just telling users to click for more information or to buy a product, but a more particular action for the website. Having a CTA button that is a lot more interactive, if needed, can yield some good results.
In the case of Crazyegg, their call-to-action is simply a text field for entering your website’s URL and a button that lets you see your website’s heat map. It is simple and direct, letting users make use of their services right on the first landing page.
The label of the CTA button itself is not in upper case, which makes it more of a suggestion than a pushy commanding statement. It is also written in the first person, making it more personable to users.
For a manly product/service like Manpacks, the CTA button should be a bit more pronounced. So it’s a big green button with its call-to-action “BUILD A MANPACK” bold and in uppercase letters. That makes it definitely attention-catching and almost undeniable.
The copy supporting it says what Manpacks is all about, with a background showing “manly” men doing “manly” stuff. Then there’s another bit of text with an arrow pointing to the CTA button, stating that thousands of men have already signed up. For the kind of customer Manpacks is targeting, this is a pretty good call-to-action.
6. Less Accounting
The call-to-action here is a bit like that of Crazyegg because it also has text boxes for users to enter information into. Only here, it is for account registration. The CTA button is merely a confirm button for a registration page, which is in itself a call-to-action. If you are looking into a website of an online accounting company, then it is presumed that you already know what you are looking for and is just deciding if this particular service is good for you.
The copy isn’t really copied but information regarding the different payment plans for Less Accounting’s services. The call-to-action is for potential customers to have a free trial so they can see for themselves if Less Accounting is right for them.
The colors used here are mostly muted, with the CTA button labeled “Let’s Do It!” in a darker shade of blue. The CTA statement on the button is similar to that of Crazyegg, also making it personable. The exclamation point makes it seem like Less Accounting is going through the whole process with the user by saying, “Let’s do it! Let’s make accounting a lot easier for you!”
Pointers for Good Typography in CTA Buttons
Use a Readable Font Consistent with Your Design
While it is true that the CTA button must draw attention to itself, it must also not stick out so much like a sore thumb that it puts people off. A readable font that is consistent with the other fonts used on the website, preferably the same type of font, should be used so that it doesn’t clash with everything else. To make it more visible, you may try to make the font bold to see if it looks good and is more visible.
Size and Color
The size of the CTA button is a crucial decision to make for the designer. While it must be big, it can’t be too big that it moves other elements out of the way and takes up too big a chunk of the screen. It should be a bit bigger than most other elements on the page while still being small enough to blend in.
As for color, it is best to use the color used for anchor text on the website, excluding the default. It should be a complementary color that doesn’t clash with everything else while still being different enough to draw attention to itself.
There has to be some space between the copy and the CTA button, as well as everything else. The empty spaces are just as important as the text, as ample spacing makes everything more readable and helps the audience distinguish one element of the website from another.
The call-to-action must be easily seen, which means it shouldn’t be on the side of the page or anywhere else where it won’t be the focus. For calls-to-action that has other things like text boxes, the CTA button may reside right beside the other interactive element, as long as the call-to-action as a whole, is near the middle of the website where it can be seen easily.
As you can see, while it may seem at first that any button would do, there is a lot of thought put into the design of CTA buttons, including its typography. It may seem like a small detail, but as with a lot of things, it is the small details that matter most in the end.