Hi chaps … ages since I’ve used Freeway but have a new client and am determined to make his very simple site nice and clean. I’ve forgotten everything so please forgive these very basic questions, if you look at the screen grab I don’t seem to be able to move the image, the kerning is too tight and I’m not sure what to change in the styles palette to adjust this. The word ‘hand’ has decided to drop down a bit depending on where on the page I drag the box … also what’s all the space between the text and the html box ?
If anyone knows of a good resource (tutorial) that I can browse I might not have to pester you chaps all weekend … talking of which have a good one.
I wondered if I can kern per letter (I’m a bit fussy about spacing between characters).
This is the Web - you have no control over what device is used so to adjust kerning to such an extent seems wasteful of your time and Client’s money - unless you are doing it for nothing!
There is no ‘shift’ applied…
Without seeing the underlying code…get it online and we can tell you exactly where its going wrong.
Another thought - is all the text html - not got a bit of gif in there?
I wondered if I can kern per letter (I’m a bit fussy about spacing between characters).
Normal web typesetting only supports letterspacing controls; tracking not kerning.
When you’re playing with large typesetting this can be a PITA. Even given the different devices around, if the default character spacing for a font is sub-optimal it will be that way everywhere. Well, assuming they all see it set in the exact same font of course.
If this really is an issue you have three options…
Set your ‘hero’ type in a graphic box. This lets you do actual kerning, and this will output as a bitmap graphic that looks precisely as you set it. However, because the result is not ‘real’ text this is deeply un-Accessible and makes proper Responsive design work difficult. Not to mention missing an important trick when it comes to SEO. I listed this first, but it’s your last resort.
Find a web font that has better character pair-level kerning as standard. FontSquirrel, Google Fonts, and others can offer some very interesting options. If you’re feeling especially type-nerdy you could even create a custom-kerned version of a font with Fontographer or Font Lab and use that as your custom web font, loaded locally from your own site. As a font geek this does appeal to me, but it’s seriously OTT.
Use the custom kerning abilities of the kern.js library. This does appear to be the “oh yes you can” answer to the truism I typed first. I haven’t used it myself – not YET – but take a look at http://www.kernjs.com and see how you get on.
A quick FYI for anyone else reading, this is simply not worth bothering with for body text. Individual character pair kerning is a headline-level design-obsessive thing.
There is a strategy I have used to achieve manually kerned type for large headlines… using the letter-spacing property of css on over-lapping spans.
Now if you just said “wha?” then you should abandon this “web as DTP” nonsense. I don’t know if the web will ever be like inDesign-- the world has had decades of time to make it happen and it hasn’t. Print DTP took less time than that. What that means, I will leave open to y’all’s interpretation. To me, it’s Captain Obvious.
So, while I would never recommend this method for regular use-- I mention it because it is possible and I liked the results. Visually, as I hate spans for the most part.
Use your browser’s Web Inspector on the top heading to see how the spans are applied. Turn those styles off and you can see the difference. Obviously not practical for most applications, obviously not beginner or novice friendly. But it is, somewhat, satisfying for those typographically sensitive souls.
