Typography etc.

[MattSelf]

It looks like the ligatures in the font aren't showing. Is this something that can be turned on? In the character map, it shows that the font has it but they aren't being displayed.

[MattSelf]

For the underlines, can they be a bit closer to the text?

Is there any way to have the underlines close to the text, but have them break and 'skip' certain descenders in the letters? I've seen an example of this on http://www.timothytaylor.com/ and I think it would be great to have this feature.

[cartogram]

@MattSelf the underlines are in. I like'em!

[cartogram]

@MattSelf We tried a few things with the ligatures, with no luck. There are a number of reasons this might be 1) it could be browser interpretation of the font, for example chrome/safari/firefox's own hangups about displaying ligatures, 2) the specific webfont version you bought might not have ligatures enabled, or 3) we might have to manually enable it with one or more CSS definitions, which we tried.

Could you point us to where you purchased the webfont? Then maybe we can get some more information from there and find a way forward.

[MattSelf]

Here's where I got the .woff from: http://www.myfonts.com/fonts/linotype/times-ten/

[MattSelf]

For the underlines, it looks like a 'stroke' of white is added to the text, in order to block the underline, right? If thats the case could you increase the weight of the stroke to be a bit heavier? I'm still seeing small bits of the underline through some of the type.

[feeohnah]

@MattSelf I don't actually see any ligatures in action on the webfont preview there: http://www.myfonts.com/fonts/linotype/times-ten/webfont_preview.html#index I've reached out to MyFonts customer support to confirm if the standard ligatures are enabled by default for the webfont version.

[feeohnah]

@MattSelf I'm not seeing that same underline issue, can you let us know more about the environment you see this on (browser, version, OS, and device)?

[MattSelf]

Sure thing, I'm on an iMac running OSX 10.12.5, the issue is in chrome and safari. I also just checked it on my iPhone and it appears in the iOS version of Safari as well. I have one more screenshot of a lowercase 'g' which is a bit more obvious.

[MattSelf]

I see what you mean about the webfont not including ligatures. That would be a shame! Hopefully they have some more info about this as I see ligatures used quite frequently online, and I purchased the font thinking they would be included (they were included in their character map). Thanks for looking into this.

[feeohnah]

@MattSelf here's the response back from MyFonts:

The webfont kit's default download settings only uses a subset of characters. For those accented characters to display, you would require a 'configured' webfont kit download that includes the complete character set. This can be configured using the Webfont Kit Builder page at https://www.myfonts.com/my/orders/kitbuild.html

Select the Times Ten webfonts you wish to incorporate in to your custom build (click its name, then check the appropriate checkboxes). As you do this, a sample image of the webfont will appear.

Click on the sample image to see "Character Set" options. Under 'OpenType Layout' Check off the 'Keep All OpenType Layout' option to be included, and then 'Download'.

Upload the newly 'configured' web font kit to replace the current files/code, and the accented characters should then display.

Let us know if you have any other questions. Thanks for using MyFonts!

Are you able to give that a go and send us the new download? Let me know if you run into any issues.

[MattSelf]

Just emailed a new batch. Hopefully they work fine!

[MattSelf]

I hope I haven't opened a can of works here, but the new underline setting has caused some issues with the text overlaying over the images. The white is visible. Is there any way the white can block the underline, but be transparent to the image below? Not sure if this is juts creating some difficulties for no reason. If its not possible let me know and we may have to go back to no overlap.

[cartogram]

@MattSelf The technique we using for the under line spaces is the same as the example you sent, and it is definitely a "trick", but I think we can work on refining that to get it right. Another, more standard (less "tricky") way to do it exists, but is only supported in Chrome. It looks like this: https://codepen.io/cartogram/pen/RgoQJj

[cartogram]

[MattSelf]

I think the Chrome only version is fine actually, maybe we should just use that. Its cleaner. Hopefully less hassle for you guys too.

In order for it to look ok on Safari, could you reduce the thickness of the underline? Maybe split the difference between the 1 pixel and where we are now.

[feeohnah]

@MattSelf I've cc'd you on my communications with MyFonts regarding the ligatures. If you know of any websites using this font that show ligatures send us the links and we can look under the hood. Odley, if I go to fonts.com and type "baffled fish" the fi and fl ligatures show up in the type tester. But it's a generated image so I can't inspect it...

[MattSelf]

Very strange, I'm not really sure what I can offer. I unfortunately don't know of nay sites that use that particular font, and searching for it would be difficult as MyFonts generates a file name for every file downloaded, so I can't search for TimesTenLT.woff for example.

I'm a bit stuck on what else I can suggest!

[feeohnah]

@MattSelf I didn't find the tool the MyFonts support team suggested to be very helpful. We'll try a few others things and see if they can also provide a bit more information. I feel like this is all a lot more complicated than it should be!

[MattSelf]

Do you guys want to try this font with their "30 day trial" to see if the ligatures will work? Their 'webfont preview' still doesn't show them, but maybe they will work once on the site?

http://www.myfonts.com/fonts/linotype/life/webfont_preview.html

[feeohnah]

@MattSelf I've added the preview. I can see the "fi" ligatures! http://self.siteleaf.net/projects/dutoitallsopphillier Unfortunately the MyFonts preview adds a janky blue bar at the top of the site that we can't get rid of until the fonts are purchased.

[MattSelf]

So much work for such a small detail! Thank you for this. I will review the font today and purchase a final so we can get rid of the MyFonts preview bar.

[feeohnah]

@MattSelf no problem, this was a good learning moment for us :) Let us know when we can get the final font up there and get rid of that janky blue bar.

[MattSelf]

Could you do me one favour before I pull the trigger on purchasing another font? Could you try a test of this font? I think it may be closer to the original font I specified. If this works then I'll purchase the font and close the book on this one for good.

https://www.myfonts.com/fonts/linotype/times/roman/

[feeohnah]

@MattSelf I don't see the "Advanced Testing" options on that one, maybe they only have that options for newer fonts? Let me know if I'm missing something but for the Life I was just able to click on the "try these fonts on your site" button and copy/paste the embed script.

http://www.myfonts.com/fonts/linotype/life/webfont_preview.html#index

[MattSelf]

OK, so please ignore this and we'll stick with what is currently being used. I don't want to open this can of worms again! I'll purchase the font today.

[feeohnah]

@MattSelf hehe, okay

[feeohnah]

@MattSelf let us know if everything looks good with the new fonts or if we need to re-open this

[MattSelf]

Fonts are all looking great now!

On Wed, Jul 5, 2017 at 12:50 PM, Fiona notifications@github.com wrote:

@MattSelf https://github.com/mattself let us know if everything looks good with the new fonts or if we need to re-open this

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/studio-cartogram/studioself/issues/15#issuecomment-313161352, or mute the thread https://github.com/notifications/unsubscribe-auth/AbbwReHteGq8bFNqBn521kQEc--wASJYks5sK77UgaJpZM4NzCxG .

[feeohnah]

Great!