Jump to content
The latest typography links delivered straight to your inbox.

Why does Roboto look so thick on my page?

Recommended Posts

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!

Link to comment
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. 

Link to comment
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.

Link to comment
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/

Link to comment
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.

Screenshot.png

Link to comment
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.

Link to comment
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...

Link to comment
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?

Link to comment
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.

Link to comment
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.

Link to comment
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:

CRu9Pe8UkAE821e.png:large

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.

Link to comment
  • 2 months later...
kontur
On 9 December 2015 at 5:28 PM, Seppl said:

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.

Screen-Shot-2016-02-28-at-20.44.39.jpg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Our partners

Discover the Best Deals for Freelance Designers.
The largest selection of professional fonts for any project. Over 130,000 available fonts, and counting.
Get to your apps and creative work. Explore curated inspiration, livestream learning, tutorials, and creative challenges.
Discover the fonts from the Germany foundry FDI Type. A brand of Schriftkontor Ralf Herrmann.
Pavillon Gotisch: Available to supporters of Typography.guru.
×
×
  • Create New...

Important Information

We are placing functional cookies on your device to help make this website better.