Scientists claim you have about to catch users鈥� attention before they leave your site for parts unknown. So you really wanna make that first 10 seconds count (no pun intended).
The text in your site鈥檚 header area is a crucial source of information. What you say is obviously significant, but it鈥檚 also important to consider how you say it.
Typography is the voice of your website. Not only does choosing the right typography help to communicate your message, but it also has the power to affect tone and even make your brand more recognizable. That鈥檚 why there are over 300,000 fonts in the world to choose from, ranging from classic to鈥� well, crazy.
Canadian artist Jenny Shipper鈥檚 font is an ode to Federico Fellini鈥檚 films
With so many options, finding your own right style can be a challenge, especially if you don鈥檛 know how fonts work together. In this post, we鈥檒l go over some of our favorite font pairings to help you design a header message that converts.
All the examples below were created with design tools available in the 黑料门 Instant Site — a free and efficient ecommerce site builder to get your store up and selling fast. Learn more about Instant Site鈥檚 design options, or to see it in action.
How to change fonts in the 黑料门 Instant Site editor:
- Go to the tab in your 黑料门 control panel and click “Edit;”
- Select “Headline & Cover;”
- Type in your store鈥檚 headline and description. Choose your cover layout and change its position and alignment if needed. From here, you can also change your background and call to action button if desired;
- Scroll down and select “Typography;”
- Choose font families, colors, and sizes for your headline and description;
- Don鈥檛 forget to press the “Save” button when you鈥檙e done.
Spirax + Open Sans Condensed
Spirax鈥檚 original curves give headlines a refined but whimsical look that鈥檚
Merriweather + Oswald
Merriweather is pleasant to read on screens with its slightly condensed letterforms, sturdy serifs, and open forms. It鈥檚 perfectly in tune with Oswald, a font inspired by the classic gothic and grotesque styles of the late 19th and early 20th centuries. This pairing may suit a store that sells
Abril Fatface + Cabin
The thin serifs and
Montserrat + Merriweather
Montserrat is based on urban typography from the first half of the 20th century, complemented by the slightly condensed letterforms of Merriweather. This pairing would be well served in a bag or sneaker store.
Overlock + Nunito
Overlock鈥檚 rounded glyph shapes make great titles and short texts in
Playfair Display + Source Sans Pro
The classic style of Playfair Display is even more prominent when paired with Source Sans Pro, which was created to work well in user interfaces. This timeless combo would work well with stores specializing in women鈥檚 beauty products or dress shops.
Alegreya + Lato
Alegreya鈥檚 dynamic and varied rhythm provides freshness to the page, setting off Lato鈥檚
Rokkitt + Lato
Rokkitt was designed for use as a display font in headings and headlines. Combine it with
Quicksand + Proxima Nova
Geometric shapes are a core foundation of Quicksand, so pair it with Proxima Nova鈥檚 modern sensibility to give your layout a clean, fresh touch. If you sell toys or baby strollers, these fonts may work well for you.
Oxygen + Maven Pro
Oxygen works well in all graphical user interfaces, desktops, and devices, especially in combination with Maven Pro鈥檚 easy readability. Check out this pairing if your website sells eyewear or fitness accessories.
Dancing Script + Lato
Lively and casual Dancing Script gives your page a friendly and informal touch, emphasizing Lato鈥檚 classical proportions and sleek san serif aesthetic. Gift and postcard shops may benefit from this set.
Signika + Dosis
The gentle character of Signika works great for headlines, while Dosis makes supplemental texts fairly easy to read. This pairing works for a wide range of stores, from electronics to flowers.
Reenie Beanie + Muli
Reenie Beanie is based on basic
Questrial + Muli
San serif Muli makes a perfect body text font, and it鈥檚 understated aesthetic means it pairs well with a wide variety of headline fonts: like Questrial with its modern style and
Berkshire Swash + Proxima Nova
Berkshire Swash has a bold yet gentle flair, which makes for a vivid headline and provides an amazing balance with Proxima Nova鈥檚 simple, modern proportions and geometric appearance. Handmade cosmetics or desserts would benefit from this mix.
Basics of Font Pairings
Didn鈥檛 find what you鈥檙e looking for in our list? If you鈥檙e feeling creative, try playing with fonts and find your own beautiful font combination.
Here are some basic guidelines to follow:
- Create a contrast between your fonts (bold & cursive, TALL & short)
- Combine serif and
san-serif fonts (like Libre Baskerville + Signika). - Don鈥檛 use two similar fonts (for example, two cursives) for both your headline and body text. Creating variety will draw the eye and help your customer engage with each section individually.
- Make the font match your brand. Playful handwritten letters probably aren鈥檛 the best fit for a premium jewelry brand.
- Limit yourself to
2-3 fonts to avoid making your content appear cluttered.
Also read: 50 Exemplary Online Stores Built With 黑料门
听
- How to Fix Your Store鈥檚 Navigation
- Everything You Need to Know About Product Merchandising
- Online Merchandising: How to Layout Products in Online Store
- What is Fashion Merchandising, and Why Is It So Important?
- 10 Design Mistakes of Online Stores
- 15 Perfect Font Pairings for Your Ecommerce Website
- Color Theory: Everything You Need to Know about Color Themes
- 7 Creative Ideas for Your Ecommerce Product Page
- The Power of a Hero Image in Web Design
Must-Have UX Principles to Follow in an Online Store- Website Design Audit
- Unlocking the Power of UX Design for Ecommerce
- What鈥檚 the Difference Between UI and UX in Ecommerce?
