We applaud anyone who chooses to create their own website. It is a huge, brave task and our hearts break when seeing it done poorly. Because we want to see you succeed, we’re here to share a few tips for you, scrappy and innovative business owners who are excited to get started DIY’ing the foundation and reputation of your new business.
Left alignment
The temptation to center align text is strong. It seems more balanced by definition or “clean.” But, center alignment is proven to not be as easily readable. Think about it: not to have text where your eye expects it to be as you read; from left to right, one line to the next. It makes perfect sense why center alignment is not the best option. Anything other than left alignment interrupts your reading pace. The flow is disorganized and chaotic. Center alignment is disruptive and ignorant of the user experience, there, I said it! Do your eyes, brain, and audience a favor. Keep your margins straight and your text aligned to your columns.
*Sentences that are very short and don’t need repeated eye movements in order to process can be center aligned. Center alignment is perfect for titles, headlines, and invitations.
Font choice
Font choice is an element of brand identity. Fonts communicate and set the tone of your message, mission, and organization and should speak directly to your ideal audience. A brand that specializes in affordable snacks for toddlers won’t use the same font pairing as a high-end shoe emporium. Don’t pick fonts just because you like them. They are an ingredient we use to appropriately create your whole brand.
To refresh like a pro, limit the number of fonts on your website. Personally, we aim to have no more than 3 or 4 fonts and always consistent font sizes within a website.
Choose a serif font and pair it with a san serif font to strike a good, professional balance. Use one for title or headline text and one for body text. This is typographic hierarchy.
Check out some of our font pairings for some ideas.
Example of professional font use for a website:
1. Headline/Title font – contrast the main body font and used to highlight or draw attention.
2. Main body font – use this for everything other than titles.
3. One more coordinating font for use in navigation and/or footer. The site can survive without this but it will add just a little something, like a garnish.
How to use decorative fonts like a pro
- If you use a cursive or hand-lettered style font use it only as an accent and NOT for blocks of text.
Blocks of text in these styles are difficult to read. Your audience will not stick around if they literally cannot read your content! - Next, consider how your site looks on different devices.
3 lines of pretty cursive on a desktop computer might look nice but on a mobile phone or tablet the text might (most likely) display in long columns. A mobile phone doesn’t have the same screen space a laptop computer does. It condenses your website layout to fit. 3 lines of pretty cursive turns into a whole chunk of overlapping, unreadable, scribbly, chaotic text. - And now, let us address handwritten and cursive fonts and the catastrophe of capitalization.
Capitalize the first letter of a word, yes.
However, full words and sentences of upper case cursive/handwritten style font are a no-no. These style fonts are meant to add a human element to your design. There’s no denying, handwriting is personal. Consider this, when you write in cursive with a pen and paper you do not EVER write in all caps in that style. Don’t type it. - DO NOT add space between cursive letters. They’re meant to join. Keep it tidy. Use them wisely. Don’t touch the kerning.
Consistency
Consistency involves thoughtfully selected fonts, font sizes, use of upper/lower case, color, voice, temperature, and alignment. It shows you know and care about your brand.
Consistency is part of a positive user experience and a good habit for you to get into. We do understand it’s fun to play around with all your options. The problem arises when you don’t understand exactly what you’re doing. To get a feel for professional consistency check out other established brands and take note of how they use their design elements. Aim higher.
White space
Not every inch of space needs to be filled with something, as tempting as it is to do that. A good way to draw attention and emphasize something is through the use of white space, margins, and padding. Less is often more. This is the easiest way to look like you know what you’re doing until you can hire a professional web designer who knows how to balance anything extra you want to add. Curate the content you want to present. Then, tailor what you need to present to your audience to be informative, direct, and on-brand without cramming everything into a small space. If you have more info than what fits you now have the opportunity to create your next installment. Bonus!
Sign up for our DIY Brand Audit workbook to get the full scoop on doing it yourself, like a pro.
