Fonts that makes your website attractive and Pleasing

Fonts that makes your website attractive and Pleasing

Pleasing Fonts


The look and feel of the website is what brings the audience and traffic to your website. There are various factors which counts a lot to make a website look neat and good. Choosing the right font for the right section is one of the toughest call that every designer has to take.

For a website to be interesting, it must be able to give its visitors a constant stimulation of freshness. Therefore, a successful website must have the ability to evolve as time goes by. For any good website, they must have the 5 factors so that the website is professional.

Firstly, what a professional website should have is the consistent look and feeling. What we are talking about right now is the mantra of the website. This is the feeling that surfers see when they arrive to your website. Throughout times, the website must have a consistent design, colors, font and general look. If your website has different fonts on different pages and the color scheme is changing as the visitor surfs through your website, it will create an unprofessional attitude because your website will look like a patchwork of web pages. This will also create a visual confusion to the visitors making them feel like your website links to their people’s website. Another point is, the visitors might feel that the contents in your website tend to be irrelevant. The best way to give the visitors a professional yet comfortable feel is to use 1 font as the heading and maybe 2 fonts for the text. As for the colors, you should use two primary colors and have a third one as a secondary color. The shading of your website should also be made up of one or two primary color one more for the secondary color. With all these elements build into your website, it will be able to create a sense of harmony and unified design.

Another issue to look after on your website is the consistent navigation. What we mean here is the way your visitors could get around your website. For instance, your links should always place at the same location in all pages. This is a matter of consistent and to achieve this will give your visitors an assured impression that you have gone through great effort in designing your website. This feature is very important so that users could get back to your home page no matter where they have gone in your website. This is very useful as visitors tend to want to get back to home page most of the time and being able to do that with just a click is a must. Another situation where this function could be useful is when someone lands into a subsidiary page on your site from a search engine or another website, they can easily find a way back to your home page.

Search function is also very important for your users so that they could search for specific details in your website. This can save him ample time so that he doesn’t have to go through all the pages in order to reach his destination. Next, your website should have well balance text and graphics. Too much complicated graphics may make your website load slower. Therefore, it creates a longer waiting time for your users. So, in spite of going for style, we must also remember the effectiveness of the website.

Contacts should be displayed with extra care and attention. Make sure that you phone numbers, logo and slogan is properly displayed. This is very important so that you customers can contact you if they feel the need to. It would be very frustrating if they can’t find a way to contact you.

If you website possesses all the factors that we have discuss, you will have a very informative, useful and effective website because visitors could get around easy, get information easily and so on. Make sure all the pages in your website have such elements and the foundation of your website will have the ideal balance. Then, your website will be successful.

Few tips for making your website attractive:

  1. Apply Bold to  the highlighting section
  2. Use of headers with heading is very important
  3. Use of H1,H2,H3,H4 tags
  4. Creating differentiation between section by implementing proper font and font sizes
  5. Choosing the right image[Info graphics]
  6. Headers and footers – Common to all pages
  7. Proper navigations between sections
  8. Use of proper scripts and forms.

How does font makes difference to the website.

Choosing the font is one the major call for designing a website. Its always good to choose a font which is commonly available on all platforms. Few people do use third party fonts, by embedding them into website, its loaded from some JavaScript, Offcourse it’s a good practice to implement good looking fonts on websites which makes them attractive but by doing this it might increase the load time of the site, which is not suggested though.

What are good fonts which are commonly available on all platforms?                    

I have gathered together a nice resource list of stunning web safe fonts that you can use with CSS stylesheets. “Web Safe” fonts mean that they will be extremely common on most versions of Windows, Mac, Linux etc, so they will be viewable by more a less everyone. Before I list these fonts, I want to let you know about one of the best font resources that has over 170,000 fonts to choose from.




[css].classname {
color: #333333;
font-family: Impact, Charcoal, sans-serif;

Palatino Linotype



[css].classname {
color: #333333;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;


[css].classname {
color: #333333;
font-family: Tahoma, Geneva, sans-serif;

Century Gothic

[css].classname {
color: #333333;
font-family: Century Gothic, sans-serif;

Lucida Sans Unicode

[css].classname {
color: #333333;font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;}

Arial Black

[css].classname {color: #333333;font-family: ‘Arial Black’, Gadget, sans-serif;}[/css]

Times New Roman

[css].classname {color: #333333;font-family: ‘Times New Roman’, Times, serif;}[/css]

Arial Narrow

[css].classname {color: #333333;font-family: ‘Arial Narrow’, sans-serif;}[/css]


[css].classname {color: #333333;font-family: Verdana, Geneva, sans-serif;}[/css]

Copperplate Gothic Light

[css].classname {color: #333333;font-family: Copperplate / Copperplate Gothic Light, sans-serif;}[/css]

Lucida Console

[css].classname {color: #333333;font-family: ‘Lucida Console’, Monaco, monospace;}[/css]

Gill Sans

[css].classname {color: #333333;font-family: Gill Sans / Gill Sans MT, sans-serif;}[/css]

Trebuchet MS

[css].classname {color: #333333;font-family: ‘Trebuchet MS’, Helvetica, sans-serif;}[/css]

Courier New

[css].classname {color: #333333;font-family: ‘Courier New’, Courier, monospace;}[/css]


[css].classname {color: #333333;font-family: Arial, Helvetica, sans-serif;}[/css]


[css].classname {color: #333333;font-family: Georgia, Serif;}[/css]

Best Font Sizes
Unless you’re a web designer, of course, a Windows, Macintosh, or other system will have only a handful of fonts installed. There is little overlap between the default installed fonts on these various systems. Already with many browsers, and increasingly in the future, readers will be able to decide on the fonts they want to view web pages with. With CSS, you can suggest a number of fonts, and cover as many bases as possible. But dont rely on a font being available regardless of how common it is.

More important still is font size. You may be aware that the same font, at the same point size on a Macintosh “looks smaller” than on most Windows machines. In a nutshell, this is because the logical resolution of a Macintosh is 72dpi, while the Windows default is 96dpi. The implications of this are significant. Firstly, it guarantees that it is essentially impossible to have text look identical on Macintoshes and Windows based systems. But if you embrace the adaptability philosophy it doesnt matter.

If you are concerned about exactly how a web page appears this is a sign that you are still arent thinking about adaptive pages. One of the most significant accessibility issues is font size. Small fonts are more difficult to read. For those of us with good eyesight, it can come as a shock that a significant percentage of the population has trouble reading anything below 14 point times on paper. Screens are less readable than paper, because of their lower resolution.

Does that mean the minimum point size we should use is 14 pts? That doesnt help those whose sight is even less strong. So what is the minimum point size we should use? None. Dont use points. This allows readers to choose the font size which suits them. The same goes even for pixels. Because of logical resolution differences, a pixel on one platform is not a pixel on another.

You can still suggest larger font sizes for headings and other elements. CSS provides several ways of suggesting the size of text in such a way as to aid adaptability. Well look at just one to get an idea.

With CSS you can specify font size as a percentage of the font size of a parent element. For example, headings are inside the BODY of the page. If you dont set a size for the text in the BODY, then the text of the BODY will be the size that the reader has chosen as their default size. Already we are aiding adaptability of our page, simply by doing nothing!

You might say but the text looks too big if I just leave it like that. Make it smaller then. But in your browser. And your readers will then have the option to make it bigger or smaller in their browsers too, depending on their tastes, or their needs.

We can make headings and other elements stand out using font size by specifying that headings of level 1 should be say 30% larger than the body text, level 2 should be 25% larger, and so on. Now, regardless of the size that the user chooses for their main text, headings will be scaled to be proportionally bigger than the main text. Similarly text can be scaled to be smaller than the body text, however, this can give rise to situations where the text can be illegibly small, so use with caution.

We’ve done very little really, just avoided using absolute font sizes, and used proportional sizes for headings, and we hvve already made our pages much more adaptable and accessible.

19 thoughts on “Fonts that makes your website attractive and Pleasing

  1. I just want to say I’m all new to blogging and honestly loved this blog site. Likely I’m want to bookmark your website . You actually have outstanding well written articles. Kudos for sharing with us your web site.

  2. Pingback: Fonts that makes your website attractive and Pleasing | Web Designing - Top Tips for Web Developments |

  3. We are a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with helpful information to paintings on. You have performed a formidable job and our whole group shall be thankful to you.

  4. I’m often to blogging and i truly appreciate your web site content continuously. The post has truly peaks my interest. Let me bookmark your weblog and maintain checking choosing data.

  5. Hi just happened upon your blog via Bing after I entered in, “Fonts that makes your website attractive and Pleasing | Designing” or perhaps something similar (can’t quite remember exactly). Anyhow, I’m glad I found it because your content is exactly what I’m looking for (writing a university paper) and I hope you don’t mind if I gather some information from here and I will of course credit you as the source. Appreciate it.

  6. It’s very trouble-free to find out any topic on net as compared to books, as I found this piece of writing at this site.
    buildabear managed colocation

  7. Pingback: The Key to Better Website - Design - Top 10 Technology Solution

  8. Pingback: Fuentes seguras para web | Memoria gráfica

  9. Pingback: Web Safe Fonts Percentage | Technology Documents

  10. Attractive section of content. I simply stumbled upon your site and in accession capital to say that I get actually
    loved account ylur weblog posts. Any wway I will be subscribing for your augment and even I success you access persistently quickly.

Leave a Reply to Elis Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s