Where to start designing your blog post fonts for better readability?
Let's start with the base font size for the content of a blog post. I think starting from 1.1rem is safe for readbility on both desktop and mobile screen. Not too small, not too large. Then, we can start improving from there.
Upon inspecting the page on the Android Developers Blog, I see that they're applying different font for the headings. But why?
h2, h3 {
font-family: Google Sans, Noto Sans, Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
body {
font-family: Roboto, sans-serif;
font-weight: 400;
}![]() |
| Different font family for headings. |
I think, letter spacing and letter width is the reason.
I tried to achieve the same readbility level by applying the body font to the headings and adjusting the letter spacing. It looks off proportionally, and it's definitely lacking in letter width.
https://www.blogger.com/rpc_relay.html https://www.blogger.com/comment/frame/220561901913020919?po=6442046225359079051&hl=en&saa=85391&origin=https://xmlexpr.blogspot.com&skin=contempo https://xmlexpr.blogspot.com/2025/10/weekly-blog-design-003.html#comments https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NQkD-yDlHw85cy7SuibkKOiQbDBzHQ4JZ0JrogebwNGuX0YGkM5OW8bRI0uTgUTLE0rj_7yU9ou-uz8tqeT67w4o-5TczG2yt-E64KkZrJz_GHEOh1HmFiS0vBIuhWrd9M1kz-5V6MImQodgOAvJ3ATmMkZ8WtJRBdjcelnd9skWRLV2Wtq6VNMm8s4j/s72-c/font-family-difference.gif true ["weekly-blog-design"]