Why does Roboto look so thick on my page?

[Seppl]

Hey there,

does anyone have any idea why Roboto looks so thick, almost medium/semi-bold like on my page, despite being regular? 300 looks to thin, 400 too fat. I'm kinda stuck in the middle. I do like the look of the font in combination with Rajdhani - tried about 20 others, nothing looked as good. Any ideas how to improve the look or alternatives?

Example:

http://bit.ly/1NQq3zk

 

Thank you!

[Ralf Herrmann]

Can you post a screenshot from your browser of the specific section on the page you are talking about?

[Seppl]

Hey Ralf,

I'm on chrome, Win 10, it's the same for body copy in general. Resolution or Monitor doesn't matter, always looks the same.

http://prntscr.com/974ypz

[Riccardo Sartori]

The type in your screenshot looks actually lighter than what I'm seeing on the live website with Firefox on Windows 7!

 

[Seppl]

Wow, that is even worse! It is Roboto 400 though. What to do? Changing to 300 seems to be too fragile.

[Chris Lozos]

It looks good to me on Firefox, Mac.

[Ralf Herrmann]

1 hour ago, Seppl said:

What to do? 

There isn’t much you can do. It’s based on the fact that there are different render engines at play and the results they produce can hardly be controlled by the web designer. 

[Seppl]

Thanks. So nothing I can do to improve rendering via css and the likes? Do you guys have a suggestion for a similar font that looks thinner but goes nicely with Rajdhani? Open Sans is too rounded, Source Sans Pro to edgy.

I like the clean and sharp look of the font in this forum a lot, but it wouldn't go well with the tech-topic of my page I guess.

[Riccardo Sartori]

Roboto tends to be a bit dark as a typeface for longer texts, but it's less noticeable when set smaller. It's mostly a matter of taste.

Perhaps you can use Roboto Light, or try to improve the overall colour experimenting with tracking and line spacing.

If you're bond to free fonts, a good place to start looking for alternatives is here: http://typography.guru/list/the-best-free-sans-serif-font-families-r5/

[Seppl]

Hey Ricardo, with Light you mean 300? I think that would be too fragile, what do you think?

I'm by no means bound to free fonts but I rather like cloud services. And since google is hardcoded into my theme, I don't want to use a second cloud service in addition because it slows the page down. That is why I'm kinda into a Google Font.

[Riccardo Sartori]

As I said, it’s mostly a matter of taste. Personally, I don’t find Roboto 300 especially fragile (but I find the 900 too strong next to it). Then again I don’t enjoy reading long form text in Roboto, be it 300 or 400.

As alternatives, I would probably try Alegreya Sans or PT Sans, perhaps also Noto Sans. Or, for a total tech look, Titillium.

[Seppl]

Thanks, I really do like PT Sans and would prefer it over Roboto, but someone told me it doesn't fit Rajdhani at all because these are so similar. I'm unsure with Roboto 300 because on how it may look on older smartphones...

[Seppl]

This is how it would look like with PT Sans. I'm unsure.

[Riccardo Sartori]

I think that at least it’s a better match to Rajdhani.

[Seppl]

PT Sans matches Rajdhani better than Roboto? Ok, then I'll go with that. I always thought that PT Sans and Rajdhani are somewhat indistinguishable and that there is a better contrast between roboto and Rajdhani and that this is somewhat important. PT Sans doesn't look as thick/black as Roboto which is nicer I think.

Any suggestions for letter spacing/line-height?

[Riccardo Sartori]

On 26/11/2015, 22:10:09, Seppl said:

I always thought that PT Sans and Rajdhani are somewhat indistinguishable and that there is a better contrast between roboto and Rajdhani and that this is somewhat important.

Contrast is but one of the possible elements to take into consideration in matching typefaces. Consistency in style and/or appearance can lead to an equally worthy choice.

[Seppl]

Thank you. I get this, still, I'm not happy with any of my choices so far and I'm still looking/waiting for a better solution. :( Similar in style to Roboto, thinner, but different enough von Rajdhani.

Or I'd need to do a complete font redesign of my site.

[Peiran Tan]

Roboto is having a lot of issues on my screen too. One advice from my observation: don’t use lighter weights than 400 on rich backgrounds, or you may end up with something like:

I assume the person designing this must be viewing their type on Retina screens so they’re ignorant of how it behaves on normal screens. This may be a hinting issue. The rendering is really inconsistent.

[Seppl]

Would you use 300 on a white background for copy text/articles?

[Seppl]

Would anyone know which font is exactly used here? http://hessenschau.de/sport/fussball/aktuelles-von-eintracht-sv98--fsv,bundesliga-ticker-100.html

[Riccardo Sartori]

3 hours ago, Seppl said:

Would anyone know which font is exactly used here?

That would be DIN.

[Seppl]

Yes, but which one - there are so many.

[Ralf Herrmann]

https://www.myfonts.com/fonts/fontfont/ff-din/

[Seppl]

Thank you, Ralf.

[kontur]

On 9 December 2015 at 5:28 PM, Seppl said:

Would anyone know which font is exactly used here? http://hessenschau.de/sport/fussball/aktuelles-von-eintracht-sv98--fsv,bundesliga-ticker-100.html

For future reference: In chrome, open the developer menu (Settings menu > More tools > Developer Tools), then activate the "Elements" and "Computed" tabs as shown in below screenshot, expand the "font-family" value and you will see the CSS font face name declaration value, which often will lead you to the right typeface. For Firefox there also used to be a extension that would show you what fonts and fontstacks were being declared and rendered for your selected text (can't remember the name, but you'll find it).

 

Also, Peiran Tan, Roboto is the Android operating system font. While I don't have a source to back it up, my gut feeling and the designers involved would lead me to suspect its hinting is in fact above average - you are possibly correct with saying that the issue might be hinting, but it is much rather the difference in the renderers' handling (or altogether ignoring) hinting information in the font.