Typography for Landing Pages

 

Subtle elements of design make a big impact on how users view websites. Web design can get complex when it comes to typography. Each font has its own personality and can evoke different emotions in people.

 

When generating a new landing page, you must consider readability, tone, uniqueness, and overall brand image. How multiple font families mesh can also impact the feel of the landing page.

 

Typography falls flat if the user can’t decipher the words. Some font families become unreadable at smaller sizes, and people may access the page via different device types. Consider these factors to determine the best way to set the type on your landing pages. You can also study these examples of how typography looks when it’s done well.

 

1. Know the Page’s Objective


The purpose of a landing page is to convert the user in some way. Understanding the goal helps you choose the right typeface style and the typographical hierarchy to move the user from point A to point B.

 

judy blue

Source: https://www.judybluejeans.com

 

Judy Blue shows how a typography hierarchy can guide the user to the goal. The font appears in different sizes and weights as people move down the page, showcasing the most important headers and elements.

 

Users may not understand they’re being guided to a call to action (CTA). However, they will intuitively know that the large text is the header and subheader and that the text on the button on the lower left is a clickable link. Clicking on it lets them share their email to get discounts and rewards.

 

The goal of the landing page is to gather leads for future collections or current sales, and the typography hierarchy works to push the user to that result.

 

2. Focus on Readability


Typography in web design gives designers a chance to let their creativity shine. However, readability must be the priority. The most beautiful design is effective only if the user can read the text.

 

Pay attention to how the page looks on different screen sizes. Stand up and look at the design from across the room. Does the site have a nice balance between font sizes and other elements?

 

Some typefaces are more legible than others. Go with a sans serif font for a more modern look or utilize a serif type for traditional tones.

3. Choose Emphasis to Highlight Words


Landing pages often invite the user to focus on a specific offer or information to move them from the discovery to the decision stage in the buyer’s journey. Knowing when and what words to highlight helps you choose the best typography for the page.

 

wilsonart

Source: https://www.wilsonart.com

 

Wilsonart uses typographical emphasis to highlight the words it wants users to pay attention to. You can use the same font for the entire page if you change weights, emphasis and points. Note how it utilizes a larger, bold font for the first header line and italicizes the second line to put stress on the verb. The finer details are in a lower point font with no emphasis.

 

4. Add White Space


Excellent typography in web design happens with design elements other than the text. For example, you must add white space around your headings to attract attention. A CTA button works best when you have a bit of background and a buffer around the letters.

 

You can also draw additional attention to specific text by adding extra negative space around the type. Another technique to make words stand out involves tightening or expanding the space between letters — kerning — or adjusting the distance between lines.

5. Consider Mobile Usage


Most customers access the internet via their smartphones at least some of the time. Your landing page must be mobile-friendly to convert the most number of site visitors possible.

 

crumbl cookies

Source: https://crumblcookies.com

 

crumbl cookies

Source: Crumbl Cookies Website Mobile Version

 

Crumbl Cookies offers an excellent look at how typography should adapt to different screen sizes. The text on its landing page is limited. However, it remains the same font, bold and nicely contrasted against the mobile and desktop background.

 

Note how the font size reduces slightly so the text doesn’t fall off the edge of the narrower smartphone screen. The menu remains a hamburger on both devices. The CTA button relocates to the bottom of the screen on mobile so there is more room for a larger logo at the top of the page.

 

6. Limit Different Fonts


A key consideration for typography web design is limiting your fonts on a landing page. If you tap into too many different styles, the user may feel unsettled and not even realize why.

 

Non-designers don’t understand why they have the emotional reaction they do to a page. They just know whether they like the design. It’s your job to learn the rules of thumb in the industry and do your best to create a visually appealing site that doesn’t distract from the page’s purpose.

 

7. Choose the Right Tone


Each company has a personality. The landing page tone should match the brand’s. If you have a fun, lighthearted approach, the font should be modern, with large, swooping lines and plenty of space between letters. You might choose san serif and closer spacing if you have a more formal look.

 

perfect keto

Source: https://perfectketo.com

 

Perfect Keto taps into the emotions behind different typefaces to create an encouraging, positive tone for its online retail site. It uses a thick and swooping headline font with open curves. It mixes serif and sans serif, giving it a modern look.

 

The tone is casual and fun but also authoritative. Finding the exact typography that matches your brand’s personality may take trial and error.

 

Best Typography Web Design Tips


Although technology is advancing rapidly, the tried and tested rules behind typography remain the same. The design styles that worked 400 years ago still apply today. Typography may be digital, and there may be a larger selection of fonts, but the basic excellent design will always factor in key elements that drive user experience.

 

Eleanor Hecks is the editor of Designerly Magazine. Eleanor was the creative director and occasional blog writer at a prominent digital marketing agency before becoming her own boss in 2018. She lives in Philadelphia with her husband and dog, Bear.

 

landing page design

 

Businesses in the market for a cheerful, eye-catching design should consider utilizing bright landing pages. Developers can know all the elements a great landing page should have, but if the plan doesn’t mesh, they wasted valuable time building something that doesn’t convert. The webpage must be more interesting than other things the user could be doing in a given moment to stand out against the competition.

 

Learning how to design a page that grabs attention requires a bit of thought. Designers should begin by studying some of the top examples of bright landing pages and take notes on what does and doesn’t work. Each company has its own style, so select only what seems to mesh well with the brand. Here are some favorites and why they perform so well.

 

1. Cut Clutter


Put the focus on the call to action (CTA) by removing unnecessary elements. Focus only on the goal of the page and the next step users should take and point them toward the action cohesively.

 

airbnb

Source: https://www.airbnb.com/host/homes

 

Airbnb has a very simple landing page for those looking to become host homes for vacationers. It provides an interactive sliding scale of how much landlords might earn based on the number of nights booked at a standard rate for the area.

 

To the right is a map that shows the region and the average pricing for different neighborhoods. The white space creates a clean, crisp look that draws the focus to the CTA button to get set up.

 

2. Grab Attention


Bright landing pages don’t have to be filled with white. A pop of color can grab user attention and even influence mood. For example, a brand that is youthful and exciting might use fuschia. Pay attention to the color wheel and which hues complement each other. Know the typical emotions associated with each shade and choose those that drive users to convert into customers.

 

odyssey test preparation

Source: https://odysseytestprep.com/

 

 

Odyssey Test Preparation uses bold orange and some pops of purple to attract its perfect target audience — those getting ready to take the LSATs. It keeps the design minimalistic, but the bold hues give it a different feel than the more traditional look of Airbnb’s landing page.

 

Note the addition of the trust factor under the CTA to give users assurance it’s a valid site that’s helped others.

 

3. Use Visuals


Add a professional appearance with relevant images. There’s an old saying that a picture is worth a thousand words. Humans process images better than text alone, and adding an image enhances the copy. Companies that tap into the power of a graphic to show results from the product or fill the background with an image grab attention. Adding illustrations and photographs takes the landing page design to a new level.

 

wix

Source: https://www.wix.com/wix-lp/illustration

 

Wix has several landing pages, depending on where and how users enter the site. This one has an orange illustrated background, which is a warm color often associated with joy. Note the bright pop of blue to draw users to the single CTA on the page. There is little doubt what someone’s next action should be.

 

4. Adopt a Tone


Bright landing pages call for a light tone that pulls the user into the brand’s personality. Before creating a landing page, determine the brand’s mood. Officials should write a company persona that is a mock person with a running list of preferences, jokes and favorite words. Tap into the description when creating a new landing page.

 

tushy

Source: https://hellotushy.com/

 

Tushy has a simple and light-colored palette that pulls the user in. White and baby blue create a bright, sunny look that is calming and interesting at the same time. It’s a bit different than some of the earthy tones others in the same industry use.

 

A pop-up almost immediately appears when someone lands on Tushy’s site. The humor behind the words ties perfectly into the light, bright colors. The company invites visitors to “stay for the butt jokes.” The CTA reads “Sign My A** Up.”

 

The tone can easily convert those with a certain sense of humor into paying customers. Even if visitors exit out of the pop-up, they’ll be invited to shop.

 

5. Combine Unusual Colors


Designers who want a bright, vivid look may want to combine colors people don’t normally think of together, such as red and purple, blue and yellow, or anything that pops. Keep working with the saturation and hues by adjusting shades through online color palette generators.

 

Keep brand colors in mind, but if they aren’t bright enough, it’s OK to stray outside the norm for a landing page. It can have its own design without worries about the logo hues.

 

emailoctopus

Source: https://emailoctopus.com/

 

 

EmailOctopus uses a soft minty green and pops of bright purple to draw users in. The octopus is at the forefront of the landing page design with the purple logo. Everything else adjusts around the accent color, and the result is bright and eye-catching. Notice the varied hues of green to create some texture in the design.

 

Why Are Bright Landing Pages Crucial to Success?


Businesses have just a few seconds to grab user attention. The clock starts ticking the minute they land on a page. Everything, from color choices to images to headlines to the CTA button, must be just right to engage site visitors and convert them into leads. Try adding some vivid hues to the next landing page design and see if the return on investment increases.

 

Eleanor Hecks is the editor of Designerly Magazine. Eleanor was the creative director and occasional blog writer at a prominent digital marketing agency before becoming her own boss in 2018. She lives in Philadelphia with her husband and dog, Bear.

 

Portfolio Landing Page

 

A portfolio highlights your best work. No matter what type of business you own, designs you create or photographs you take, it’s a personal calling card that shows what makes you unique. However, figuring out the best placement for your portfolio isn’t always easy. Obviously, you want it linked to from your landing and home page, but do you use thumbnails, sliders, full images or what?

 

Around 96% of site visitors aren’t yet ready to make a purchase. Your job is to convince them they can’t possibly live without what you have to offer. Showing off some of your best work is one way of engaging them and showing them what you might be able to do for them. Fortunately, there are several ways of incorporating your portfolio on the landing page without being too spammy about it.

 

1. Add a Slider


Some experts will say sliders are yesterday’s news, and you shouldn’t use them. However, with internet speeds faster than ever before, a slider is a nice way to highlight some of your best work without taking up a lot of space. Placing it at the top also shows site visitors that this is one of the most important elements on your landing page. Keep a few things in mind when creating sliders, such as how they appear to mobile users and limiting the number of screens, so the user isn’t overwhelmed with an endless sliding loop.

 

 

Tom Peters Art naturally lends itself to sharing images from paintings in a slider. When you land on the site, you see a slide that goes through several different pictures. From time to time, the offerings change based on the season or newer work. The slider and thus a few key offerings from the portfolio are the main focus of the page.

 

2. Use Thumbnails


If you want to give users a quick taste of what you have to offer, you could also add a few thumbnails of your best work and a CTA button inviting them to view your complete portfolio. When choosing thumbnails, look for images that translate well in a smaller size. You should also vary the type of thing you show. For example, if you are a photographer, you might want to highlight studio work and outdoor shots along with a few black and white images.

 

3. Make Images Clickable


When you share pictures of your work, make sure they are clickable so they take the user where you’d like them to go. If you show a product package you designed, make the picture clickable to a page of other examples or information on how to get in touch with you to create a unique design. Another option is making any photos go to the full online portfolio so the user has a chance to see more of your work.

 

However, ideally, the user takes an action that leads them to become a customer. Think about how clicking on the image creates a unique call to action (CTA) of its own and where the person goes next in the buyer’s journey.

 

usashade

 

USA Shade makes each of the images highlighting its shades clickable so users can get more information both on how they are used and how to purchase their own. For example, the first image in the slideshow is of the YETI corporate campus. The portfolio picture becomes a case study when you click on the link and it explains the uses of the shade and the size and style of the wing structure. A CTA button reads “Products in Use,” and a second one reads “Contact Us.”

 

4. Include a Logo and Tagline


Even though your goal for a landing page might be simply to highlight a specific type of work you do, you should still include a logo and tagline. It’s important to brand your business and not focus too much on a single project or image. While a portfolio highlights your best work, your brand is what shows you’re capable of continuing similar items and creating custom projects. Your logo and tagline should show clearly what you do and be memorable, so users keep you in mind when they need what you offer.

 

5. Show Different Sides


A popular trend in websites this year is showing dual sides of a brand personality. You can easily do this while highlighting your portfolio. Split the page in half and show each type of work you do with images and descriptions. Use grids to break up the different types of projects you do, with pictures that are highly relevant to what you’re trying to showcase.

 

breather

 

Breather offers office space for small-business owners. It shows the different types of workspaces by placing two images side by side. It shows locations for a few hours of work or some of the benefits of leasing for a longer term. Depending upon the user’s needs, they are taken to additional information on available space when clicking on the image. For example, they discover monthly options that offer high-speed W-Fi, cleaning, furniture and no long-term commitments. They also find out what locations are available and see additional portfolio images.

 

6. Place in Nav Bar


Another simple way of incorporating your portfolio is by placing a tab in your navigation bar that says “portfolio” or “examples.” This allows you to guide users to it no matter which page they land on. It might not be as fancy as adding sliders or a video, but it is a practical way of keeping the information available on every landing page, home page and subpage on your website.

 

Test Placement


Put your portfolio images and links in different locations on your landing pages. Conduct split testing to see where it performs best. You can track performance through clicks and heat maps, seeing where users spend the most time on the page and which links they click on. If your portfolio is performing poorly, try moving images or links to a new location on your landing page and see if that helps improve conversions.

 

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

;