When I was using Windows 8 with Chrome, I noticed that the big text fonts appeared to be not smooth. Despite this, I came across a few websites in the same environment where the texts were smooth.
For example:
The "Hello, world!" text on this page is smooth, but the "Heading" texts at the bottom do not appear smooth, even though they are smaller.
Another example is . The "Do Great Things" text on their homepage appears smooth.
Both of these pages are utilizing Twitter Bootstrap CSS.
Upon inspecting the computed style for the relevant html element using Chrome Developer Tools, the following values are displayed:
background-color: transparent;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
color: #333;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
height: 60px;
letter-spacing: -1px;
line-height: 60px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-rendering: optimizelegibility;
width: 1050px;
I observed that Asana uses a font named proxima-nova-condensed, however when I attempted to use it, the text did not appear smooth for me, even with the text-rendering set to optimizelegibility.
Do you have any insights on how they achieve this? I am interested in learning how to achieve smooth text display without relying solely on Twitter Bootstrap (or with Bootstrap if necessary).