When exporting my designs, it seems to randomly increase the letter spacing between words…any ideas what’s causing this??
This is how the letter spacing looks inside Hype (correct)…
…and this is how it looks once exported as HTML…
You can directly examine what letter-spacing is being set in the exported HTML. Are you setting it in Hype’s Typography inspector?
Unfortunately all browsers are slightly different here, especially with non standard fonts. What browser are you testing in? Can you share a URL?
Hi Jake!
As I come from a print design background this kind of stuff (variable unpredictable spacing) drives me crazy!
As Daniel mentions all browsers often render text, with the same settings, differently. Unless it is Headline~Display text I don’t bother - along with all the other inconsistencies in the modern web - it’s just one more thing.
For Headline~Display text I use a span set-up for the space itself. It can be tedious - especially if You are trying to please all the major browsers.
Note: I have not done this in Hype as if I get any grief with any headline text I create separate blocks for the offending portion(s). This is what I use for Dreamweaver…
Example:
<span style=“word-spacing: .25em;”> </span>
You can of course create a class for your span, but I find they all usually need a unique adjustment.
Below: six custom settings for the spacing as rendered in Safari. Chrome and Firefox look slightly different so the settings are a compromise; but it is far better than the default word spacing. What really threw a wrench into the works were the bullet point separators plus the use of the ampersand.
Commercial • Residential • Consulting & Design - should be simple - right? ;->
Hi Daniel,
The letter spacing in Hype’s Typography inspector is set to 0px on everything.
I’m testing it in Chrome. Managed to fix the issue by playing around with the text box (deleting the text, resizing the text box and retyping the text). So this seems to be a bit of an anomaly.
Thanks Jim,
Editing the code would be the solution, but I’m curious why the export process from Hype to HTML causes this to happen sporadically, especially when the typography settings are consistent throughout. I am using a custom font (TheMix) so that could be the cause.
There is something weird going on, at least here but maybe I see them flying 
and it happens when I create a text and export/preview the Hype document in Safari vs. Firefox. The text looks like I intended to in Safari but I get larger letter spacing and thus unintended line breaks in Firefox.
The (weird) solution I found is to dial all the text settings 1 point down, then back up and Firefox displays the text the way it is displayed as in Safari.
2 Likes
Without adjusting these properties, Hype will set attributes for the letter-spacing and line-height properties to be ‘normal,’ and word-spacing to be 0px.
So what we’re seeing is the difference between ‘normal’ and 0px for the letter spacing. To tell browsers ‘don’t use the default’, going up then down on line-height and letter-spacing should do the trick as @Rick4F mentioned.
You know, I’ve been on the internets since… oh well, a 28.8K modem was standard.
But I’ve never, ever met such a positive, helpful, explaining bunch of developers as here.
If there are any awards for this, you guys should get them all. 
3 Likes
Hi Rick!
Ditto your sentiments!
I think, as with so many endeavors, it starts at the top. Team Tumult has generated a wonderful supportive environment to match their software. I was struck by that quality immediately - which made it easier to leave Edge Animate behind and move into a new realm.
2 Likes