Cards titles look different when published

[ambitappa773737]

Here is what is happening. I have created my layout and cards using custom fonts. The problem is I get them to look the way I want them in the layout template, but when I publish the App for test viewing the leading is different on the iPad. And even more the Android looks different than both the iPad and Layout Template. Here are some screen grabs to explain:

Here is what they look like in the layout template.

And here is what the iPad ends up looking like. Just to be clear. The icons and "ambitconnection" are built into the card image.

It seems like since my layout template is set to iPad that it should look exactly like that when I publish to the iPad. Any thoughts on why this is happening?

[Colin_Fleming]

A quick comparison of the two images and it strikes me that the treatment of the cards and banners is the same. Line ends, crops, grids are the same... What's different is that Layout Templates doesn't show the OS bar at the top and it doesn't "crop" the page to only show the aspect ratio of the iPad... so I have the impression that the preview in Layout Templates is the wrong shape, specifically it's too tall.

So the impression from Layout Templates is that I'll see all of the third row of cards, but the iPad isn't that shape. Layout Templates isn't particularly strong at reflecting the height of the selected screen dimension, IMO, but the overall design is there.

HTH -- Colin

[ambitappa773737]

Sorry, I may not have been clear about what is different between the 2. Yes, the crops, grids are the same, but I'm specifically talking about the way the card titles are treated. More specifically the leading. The leading on the cards are much different between the layout template and the published app. And it becomes even more apparent if you see the android version which is different than both the layout template and the published iPad app.

[Colin_Fleming]

Got it. Sorry I missed that you're mostly focused on the fonts.

So what fonts did you load? Type/format.

The iOS and Android apps will tend to use the TTF or OTF font resource, Windows will want a WOFF format, and the Layout Templates will also want a WOFF resource.

[ambitappa773737]

The screen shots you see here were made with a pair of OTF fonts. The slab serif we've been able to convert to a WOFF for the Layout Templates. The other we can't find a WOFF version of, nor will it permit conversion. So we're looking for a replacement that provides web formats or will permit conversion.

[Colin_Fleming]

Sounds like you've identified the issue.

[ambitappa773737]

Well, we thought we did, but after replacing the font with one that had a TTF and WOFF it actually made the leading issue worse. See screenshot:

[Colin_Fleming]

A different font file/resource may have a different design -- you may need to readjust the leading or spacing values for the different font.

[ambitappa773737]

‌Yes, we have done this. I guess the problem boils down to this. We can get it to look exactly the way we want on the layout template set to iPad, but when we update the test app the leading and even the appearance of the font in some cases looks totally different. It actually looks closer to the way we want it on the Android test app.

[Gronckle]

I had a similar problem - At least on mine, the layout template is basically an approximation of the final product. The fonts on the layout preview display about 30% smaller than the app and the margins / paddings are nowhere close to the final app's display. I just kept using the live App to judge my adjustments - not worrying about the details on the layout template. After much adjusting, my layout preview looks terrible, but my live app looks just how I wanted. *shrugs*

[ambitappa773737]

‌I guess it's reassuring that someone else has had this same problem but surely this is not what Adobe intended. I'm guessing that most users are not having to look at the live app to see their changes. It just seems like you could skip the layout templates if this was the case. I feel like it must be on my end somewhere. I've just done everything I can think of, and it's still not working.

[Keith_Gilbert]

Funny, we've been struggling this week with exactly the same issue. I've identified a repeatable bug:

If you use a leading value of 1.0 or less for the text on a card, the text will display as expected on Android devices and in the Layout Template view. But the leading appears really large on iOS devices. If you use a leading value of 1.1 or larger, then the text display matches across iOS, Android, and the Layout Template.

We encountered this bug because, like you, we have large icons with small type below them, so we were messing with leading values less than 1.0 to try to get the lines of type close together.

[ambitappa773737]

‌thanks for the response. Did you end up getting any answers? We've tried every leading value and still are having trouble with it matching across iOS, android and layout template. It becomes worse when adding more than one text field.

[Keith_Gilbert]

For us, the text display matches across iOS, Android, and the layout template with multiple text fields as long as we use a leading value of 1.1 or larger for each text field.

[ambitappa773737]

Thanks Keith. That at least tells me it is possible. For a reason we can't figure out we can't get a consistent look across all platforms no matter what we do with leading, padding, margins. It's really not even close. But now I've at least got confirmation it's not acting the way it's supposed to. Is there a place where I can walk through the problem with someone at Adobe?

[NMarroquin]

I passed this on to some colleagues to take a look. They may reach out to dive deeper. There may be some OS-level differences in text compositions, or possible a bug.

[andreig1004688 · Accepted solution]

Hi, ambitappa77373764‌, Keith,

As Nathan pointed out, there are a few OS - differences that lead to differences in how text is rendered. This is especially true for leading values smaller than 1.1.

The only current work-around is to use leading values of 1.1 or larger and adjust your font metrics in a glyph editor to create the tighter leading for you fonts. 

Andrei

[andreig1004688]

ambitappa77373764, I'd be happy to connect.

Do send me a line at ganci@adobe.com and we'll see what we can do.

Thanks,

Andrei

[chikiboum]

Hi I'm having the exact same issue. So nearly4 months later we are still facing the prob.

My template Layout does not look similar on my Ipad devices especially on the fonts. SO I'm kind of blind when I do my design on AEM.

Help would be appreciated