Website Design Tip: Read you loud and clear!

  • 9
  • Idea
  • Updated 5 years ago
One of the most important design elements that you'll face when designing your website is how to present your content. Here are a few simple tips that will help give your site the professional look you want:

1. Font Selection
Use simple, consistent and carefully selected, browser-safe (http://www.ahfx.net/weblog/22) fonts. This allows for your text to show up consistently on all browsers. If you wish to use "fancy font", the only safe way to incorporate this is to first save it as an image (transparent png) and then upload it to your site. For a highly professional look, we recommend sticking with 1 font face. If you need to go with 2 fonts - pick one serif and one san-serif.

2. Font Color
It's tempting to spice up your site using lots of different colors but this actually detracts from your site, rather than adds to it. It's hard on the eyes to have various colors. We suggest keeping your color scheme to no more than 2 colors and keeping it consistent. Be sure that your text displays clearly against your background color.

3. Font Size
This is an important aspect to consider when adding content to your site. You want your visitors to be able to read your site with ease. We suggest using a font size no less than 12pt.

4. Text Alignment
The placement of your text plays a big role in making a site look professional. When possible, use left-aligned text (or right-aligned if your language uses this format). This is the easiest way to read your text as your eye tends to read from left to right.

Centering your text can be a useful way to make a line on your page stand out or have implied importance. This should only be used for headings or one-line sentences. Do not center large blocks of text as this makes the paragraph look untidy (unless you have poetry!).

Justifying your text is never a good idea for webpages. While it may give you a neat looking block of text, it is actually more difficult to read. Browsers tend to interpret the spacing differently and as a result, the spacing between your words will look uneven and inconsistent.

5. Text Layout
Adding large amounts of text makes reading difficult. It is suggested that there should be no more than 10-12 words per line. We recommend using "Layouts" (http://www.yola.com/customer-support/...) option in Yola to break your content up into neat, readable blocks (short paragraphs). Your paragraph should not be more than 8-10 lines long. Be sure include white space between your paragraphs of text - this will definitely help improve text readability.

I hope that these tips will give you the tools needed to create a fantastic looking site that people look forward to reading!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
  • great!

Posted 8 years ago

  • 9
Photo of Brendan Quinlivan

Brendan Quinlivan

  • 10 Posts
  • 0 Reply Likes
Hello Sanja,

Thank you for this article - I really found it useful as a new Yola user!

I have one question relating to the font size tip: is there a way to check your font size in the Site Builder? I ask because the Site Builder uses descriptive sizes ("Tiny", "Small", etc.), rather than absolute sizes ("12pt", etc.), and I would not want my site's text to be too small! :)

Thanks in advance,
Brendan
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello Brendan,

Thank you for your message. Sanja will be very glad to hear that her tips have been useful to you! The tiny and small fonts in our sitebuilder are fantastic when adding a customized footer, though might be a bit small for normal text in a text widget. A medium to large size can be sufficient while adding text to your site. Please note that when you change the font style, the sizes do change a bit as well. Some styles are naturally smaller, or wider then others!

I am so happy to hear that you are able to use this information. Please do not be shy with sharing how this works for you! Also, if you have any questions while building your site, our community forum is fantastic outlet for input from staff and fellow Yola community members.

Cheers!
Photo of Brendan Quinlivan

Brendan Quinlivan

  • 10 Posts
  • 0 Reply Likes
Hi Brianna,

Thank you for answering my query: I really appreciate your advice, especially regarding the effects of changing a font style. I will go and make adjustments to my site now! :)

Thanks,
Brendan
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thank you for your kind words, Brendan!
We would love to see your site when you are ready to publish it :)
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
I might just go update my site a little bit...
Photo of Vatsalya Chugh

Vatsalya Chugh

  • 2 Posts
  • 0 Reply Likes
:)
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
Thanks for another great tip, Sanja!

I especially appreciate the comment about justified text. I've used that predominately in print and on the web. I may have to rethink that. It never occurred to me that browsers may render the spacing differently.

Keep them coming! Even oldies, like me, can learn new things!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
My pleasure, Jean! Learning is a never-ending process! I've learned a few things too when I was doing the research for this :)
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
This is a video for making good powerpoint presentations on youtube. I think this kind of applies to web dsign as well.
Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
Thanks for the laugh, kevin. It was laugh out loud hillarious!

possibly, because I have no life outside Yola!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Kevin - thanks so much for sharing! I definitely had some laughs! :D
Photo of Romeo Dizon

Romeo Dizon

  • 1 Post
  • 0 Reply Likes
nice idea
Photo of Chris Walker

Chris Walker

  • 2 Posts
  • 0 Reply Likes
I have two main Yola sites at http://www.innerwealth.com and http://www.chriswalker.com.au and use the standard font format provided by the template designer. One would hope that most of these recommendations for web design are embraced by the standard template design provided by the designer, especially the PRO design.... yes?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Sanja for posting this layout article!
Photo of adilirani126

adilirani126

  • 9 Posts
  • 0 Reply Likes
please answer my question nathan.
That how to get a custom email
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I emailed you. It is Google Apps