Looking for a quick answer to your question? Click here...

WOO HOO! John and Bri are ready to help!

Just fill out the form below and we'll get back to you with some sound advice at the very least.

How can John & Bri help today?

You can read more about our privacy policy here.

Combining outline and filled text

When it comes to designing an effective website, the typography is essential. From the landing page hero area, to the banner advertisements and general page content, the right text and font is essential for attracting attention, and making sure that your website is easy to read and understand. Some specific types of fonts can be incredibly effective, especially for the headings and titles. And you can even combine the style of the fonts, to create an unusual, striking effect. This includes combining outline and filled text for web-page headings. So how can you use this effectively to create a professional result? Well, here at Pumpkin Web Design Manchester, we build websites specifically tailored to the requirements of companies and businesses across Manchester and the North West, including Blackburn and Chorley. We provide the perfect web design solutions for clients in all areas of business and industry. As a result, we have produced this guide to how to successfully use both filled and outline text together.

What should you consider when combining outline and filled text?

Outline fonts are incredibly unusual, and can easily grab attention from your users. By using these as headings in the above the fold content area, you can allow the background design and colour to fill the lettering, piquing the interest of any potential customers. But by combining this with text that is filled, the design effect can be transformed. To use this to create a professional finish, and an effect that suits your overall web design, you could consider:

  • Stacking the text and alternating from outline to filled effects
  • Using a sans serif font
  • Choosing the right colours

Stacking the text

Stacked text involves positioning each word directly below or above the others, in a way that creates a column effect. This can be a great way to draw the attention of your website users to the text, and to get your message across. Especially above the fold. To increase this dramatic effect, you could consider alternating between filled text, and outline text. This will create an area of contrast, which is sure to attract attention, bu it will also direct the eye down through the block of text.

Using a sans serif font

A sans serif font is a type of typography that does not have flourishes or flicks on the end. Instead, each letter is well defined, and there is a small amount of space between each letter. Using an outline font that is sans serif can ensure that the text is easy to read and understand on all screen sizes and devices. As the text combines both filled fonts and outline fonts, a sans-serif typography style can create a more professional result.

Choosing the right colours

Outline fonts need to use colour to create an outline that stands out and contrasts with the background, while filled fonts should be filled with an appropriate colour, that suits the background and the overall design. This is another aspect that can help to create a professional finish, which is so important when combining different textual effects.

For more information or advice, or for high quality, professional web design solutions, get in touch with the experts today, here at Pumpkin Web Design Manchester.