Skip to main content
Level 3
Mar 24, 2016 3:06 PM UTC
Solved

Cards titles look different when published

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
andreig1004688
andreig1004688Accepted solution
Adobe Employee
Apr 1, 2016 12:48 PM UTC

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

18 replies

Keith_Gilbert
Level 3
Mar 30, 2016 2:31 PM UTC

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.

Translate
Level 3
Mar 31, 2016 1:44 PM UTC

‌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.

Translate
Keith_Gilbert
Level 3
Mar 31, 2016 1:48 PM UTC

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.

Translate
Level 3
Mar 31, 2016 5:04 PM UTC

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?

Translate
Adobe Employee
Mar 31, 2016 11:16 PM UTC

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.

Translate
andreig1004688
Adobe Employee
andreig1004688Adobe EmployeeAccepted solution
Adobe Employee
Apr 1, 2016 12:48 PM UTC

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

Translate
andreig1004688
Adobe Employee
Adobe Employee
Apr 1, 2016 12:49 PM UTC

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

Translate
Aug 18, 2016 1:26 PM UTC

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

Translate