Webstudio homepage design improvements

[Ren2049]

Hey,

Just learned about this project today and I really like the vision. Here's a quick win to improve the typographic contrast (difference between headings and body text) for the homepage. Hex for the body text: #85869d

It's still wcag AA and 4.65:1 against the background.

[markxtang]

I Ren, I'm Mark, designer at Webstudio. Thank you so much for your feedback. I agree with your legibility assessment and will update the body text in the coming days.

Just checking, is the text underneath Near-zero latency the text styling you are suggesting we go with?

[Ren2049]

No-platform-lock-in is the one you should go with. In the Near-zero-latency one there's no contrast at all which looks odd. The idea isn't about making it more legible, but better looking while maintaining good enough legibility (AA).

Typographoc contrast is hard to achieve on dark backgrounds without faking it with a darker body text color, especially if the font doesn't have a good typographic contrast out of the box. I saw that you're already using the light version of Manrope. I'd change it to Inter.

[markxtang]

Font color and sizes have been updated. Thank you for your input!

[Ren2049]

As of right now (see screenshot), it still looks like before lacking contrast in typographic color, at least in Safari.

[kof]

@markxtang what's the status here?

[markxtang]

After updating the font sizes, I find there's a clear distinction between heading and body copy. The weight difference between Manrope Bold and regular is enough and I don't see the need to add a secondary color for the body copy. Actually, in one of my earlier drafts of the website, I had a secondary color for the body copy, but I removed it. This is why:

While 2 colors to create text hierarchy could be nice if the font weight difference wasn't significant, in our case it clearly is. Using a secondary color would be akin to using bold and italics at the same time. Just not necessary.

@Ren2049 thank you for the advice, but I don't think I'll be taking further action. However, please do feel free to start conversations about other design related issues. Hopefully I can be a better collaborator next time.

[Ren2049]

@markxtang no problem. I just find more contrast between headings and body text much nicer to look at, it looks more polished.

[markxtang]

I thought you should know that you inspired me to use this technique in a Webstudio template I'm working on. Here the Space Grotesk font I used didn't have as much weight contrast between bold and regular, so I thought the secondary color thing would be appropriate. So thanks again for your feedback, I appreciate it.

[kof]

closing as it seems like we had some resolution