search

Jayant Kumar @jayantkumar314

Published On - 19 January 2020 Last Updated - 4 February 2020

What is the standard font size and color for a blog ?

It doesn't matter how much you know until you know how to represent it effectively. And if you are putting a whole lot effort in preparing the content of your blog, then why not present it beautifully on the website. Choosing right font-size, color, letter-spacing, line-height, padding from the boundary ( both left-right and top-bottom ), margin, etc. will help you make your website look better and also it will help you in increasing potential visitors. In this blog, I will guide you in making the right decision for choosing the font-size, color and will also show you the appropriate way of indention, padding, margin, etc. So, let's get going.!!! 

Why Choosing Right Font Size?

You might have faced difficulty often while reading someones' blog where we have too small font-size. 12px font-size ( which is standard for paper printing ) is considered standard font-size. But when it comes to a practical website it looks very much small when viewed on a desktop or any bigger sized screen. Continuous staring on the screen for reading the content makes our eye-straining.

Don't you want your website visitors to read your blog for a long duration? So, it's a good idea to choose the right font-size for your blog's content. Simple google search shows "16px" is a good choice. But in my opinion, 18px is the best choice. Some good bloggers also suggest using 18px.

  1. Choosing a smaller font-size is not good for our eyes. 
  2. Choosing a bigger font-size is not good because our page will become too long and our website will not look good and professional.

Thus, Choosing appropriate font-size for our blog content is very much necessary.

Why I'm not suggesting you copy the font-size of the google search engine?

Google Search Engines' aim is to take us away from their website. They don't want us to spend our time on their website for searching our content.

Choosing Right Font Size:

 

So, 18px is the best choice.

.blog-content p {
    font-size: 18px; 
 }

Choosing Right Color:

When it comes to choosing the right color, themes matter a lot here.  Generally, we can categorize it into two categories:-

  1. Light Theme
  2. Dark Theme

It is a good idea to choose a light background with a dark color for the content. As researches have shown that it is good for studying longer.

Choosing a dark background with a light color for the content is not a good idea. As we might have observed several times that the text becomes blurry after sometime when we are in night mode(which I usually do in the night for studying any blog or even surfing any website). 

.blog-content p {
    font-size: 18px;
    line-height: 27px;
 }

Providing Right Letter Spacing:

.blog-content p {
    font-size: 18px;
    line-height: 27px;
 }

Providing Right Line-Height:

.blog-content p{ 
line-height: 27px;
}

Providing Right Padding from the boundary (both left-right and top-bottom):

.blog-content p{ 
padding-top: 1rem;
padding-right: 2px;
padding-bottom: 2rem;
padding-left: 2px;
}


Combinely:
.blog-content p{ 
padding: 1rem 3px 3px 5px;
}


.blog-content p{ 
padding: 1rem 4px;
}
.blog-content p{ 
padding-top: 1rem;
}
 

Providing Right Margin:

.blog-content p {
    font-size: 18px; line-height: 27px;
 }

Doe's:-

  1. 16px and 18 px is good font-size for blog website

Dont's:-

  1. Don't use font-size as 12px simply because it was standard in some old days.
  2. Don't let your font-size go beyond 18px for the normal paragraph.

Summary:-

  1. 16px and 18 px is good font-size for blog website.
  2. Line-height should be 150%;
  3. Padding should be 10px (top-bottom) and 1rem (left-right);
  4. Color combination should be light background ( preferably white) on dark color of the font (preferably black);