Text is too thin all over

[patrickarlt]

@nikolaswise I ban you from using font-weight: 300; on Calcite Web 😄

This makes fonts appear way to thin overall but particularly on headers and elements with smaller text sizes.

I bet this is also unreadable on older/crappier monitors (try the PC on the front desk) but it also still looks to thin on my retina display and thunderbolt.

Can we bump this up to font-weight: 400; with a light option for headers?

[nikolaswise]

There's been some weirdness with font rendering going on past week or so - hopefully the real strangeness is happening there. I'll address this week and make sure it looks good (hellooooo password reset machine)

[paulcpederson]

@patrickarlt this seems pretty subjective. The font weight is the same as the current weight on esri.com.

We actually had a solution where we set the weight slightly thicker on non-retina displays, which we could maybe add back in. I don't remember why we dropped that.

[ungoldman]

header fonts feel mighty thin to me

[paulcpederson]

@CassidyB do you want to get Kyle's input on this? Does he have a GitHub account?

[CassidyB]

I do want his input, I will forward this to him.

[nikolaswise]

Our font weight is allready heavier than it's peer on production right now

[CassidyB]

Did we get Kyle in here yet? If not I will email him again.

[nikolaswise]

@CassidyB please email. His input is needed.

[CassidyB]

He just submitted the request to be added . . . he will be in here ASAP.

[kyle-03674]

okay, I'm in, and reviewing now.

[kyle-03674]

I'm comparing the screenshot to the live page (http://www.esri.com/software/arcgis/arcgisonline) on multiple monitors.

@nikolaswise are there any font weights available between 300 and 400? Does 300 Correspond to 35 Light, while 400 is 45 Book?

[nikolaswise]

@kyle-03674 There are no weights between 300 and 400. Yes, Avenir Next Light (font weight 300) is similar to Avenir 35 Light.

[nikolaswise]

Please refer to http://www.fonts.com/font/linotype/avenir-next for all typeface options.

[kyle-03674]

I see the text on this page is Avenir W01, not Avenir Next -- does that matter?http://www.esri.com/software/arcgis/arcgisonline)

[nikolaswise]

@kyle-03674 The font server should be Avenir Next W01.

Where are you looking at the type? Your local build, or esri.github.io/calcite-web?

[kyle-03674]

@nikolaswise I'm just looking in the inspector in Chrome on my Mac., the public page on esri.com. I was trying to match the right half of the screenshot you took, but on my computer(s) as live text.

[nikolaswise]

@kyle-03674 Than you're all good. Esri.com is Avenir W01 right now.

[kyle-03674]

@nikolaswise Any way you can send your local build version to me as a link? I got some feedback around here (Suzanne, Karsten) but it's tentative b/c I think your sample of text before/after may have been at dif zoom levels? And we want to look at it on old monitors (big pixels) and new monitors (tiny pixels). ....hopefully this isn't too much hassle but I think it will be worth it to really get some solid styles.

[paulcpederson]

@kyle-03674 I don't think it's at different zoom levels. The screenshot is from a sample layout that mimics the Esri.com page: http://esri.github.io/calcite-web/page-layouts/product/

I've sent you a zip file via email with what should be an up to date build.

[paulcpederson]

Also, it should be noted that the site will use your system Avenir Next if it is installed on your computer.

[paulcpederson]

the stack is here: https://github.com/Esri/calcite-web/blob/master/lib/sass/calcite-web/type/_config.scss#L18

Note that if fonts.com isn't working and you have Avenir locally, you will be seeing Avenir and not Avenir Next.

[kyle-03674]

that's pretty cool! I do have Avenir Next installed (as of Friday) and I can see it being used on the sample layout page. See attached, the sample layout is using 17 px for body, and the esri.com example is 16 px. Plus, the sizes of everything else are different. If that doesn't matter, I can ignore it. I'm trying to focus on just text right now. I'm trying to get a 1:1 comparison of heading and body text.

[paulcpederson]

@kyle-03674 yes, things are going to be slightly different. It's meant to be a reinterpretation, not a direct copy. That does make it a bit more challenging to directly compare though... I certainly understand that.

You could always double click where it says font-size in dev tools and make the esri.com page 17px for direct comparison?

[kyle-03674]

Okay....I had a chance to compare side by side, at the same point size, on multiple monitors, and discuss with Karsten and Suzanne.

I agree that Avenir 300 is too light and may be difficult to read (looking at body text on the ArcGIS Online page on esri.com); but, Avenir Next 300 is fine. Avenir Next 400 is too thick. In conclusion, calcite-web should call for Avenir Next 300.

The headers seemed fine in both situations to me. I tried both Avenir Next 300 and 400, and didn't see an issue with 300 since the text is larger.

[paulcpederson]

Ok, thanks for checking this out @kyle-03674 !