https://github.com/bryanjclark/devsign-trackingandcharacterspacing
A look at getting typography tracking built out in iOS.
https://github.com/bryanjclark/devsign-trackingandcharacterspacing
Last synced: about 1 month ago
JSON representation
A look at getting typography tracking built out in iOS.
- Host: GitHub
- URL: https://github.com/bryanjclark/devsign-trackingandcharacterspacing
- Owner: bryanjclark
- License: mit
- Created: 2014-08-22T05:16:51.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2014-08-22T06:00:40.000Z (over 10 years ago)
- Last Synced: 2025-03-28T02:11:27.001Z (about 2 months ago)
- Language: Objective-C
- Size: 156 KB
- Stars: 12
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
devsign-trackingAndCharacterSpacing
===================================
A look at getting typography tracking built out in iOS.
This article was originally posted [here](http://www.devsign.co/notes/tracking-and-character-spacing).
In tools like Photoshop and InDesign, "tracking" is the term that describes the relative amount of spacing between characters in a string of text.
A wonderful bit about tracking: pick a value, and your text will have that same visual style, regardless of the size. It scales:
Unfortunately, tracking doesn't exist in iOS. What we *do* have available is character spacing:
See how character spacing doesn't stay the same when you change type size? Sketch is a great help with this - when you change a label's text size, the character spacing scales - but this isn't necessarily helpful to your development team: if there are 8 different type sizes in your app, then they've got 8 character spacing values to worry about, rather than just a single tracking value.
So: we need a way to represent tracking in code, and when we came up against this problem, I couldn't find a single implementation of this on the web. So: we made one up.
I made lots of PSD files and Sketch files, comping up different tracking values and character spacing values, and doing pixel comparisons to figure out what lined up. Once I found a match between tracking, character spacing, and font size, I put it in the spreadsheet. I came up with some theories as to how the two were related - and after a lot of digging, I found that it was actually a *very* simple relationship:
```
characterSpacing = fontSize * tracking / 1000
```
At first, I thought, "1000? Really? That's the magic number?" - but then this hypothesis totally worked on other yet-untested scenarios, so that's where we landed.
Here's how you can use this in practice:
If you want an easy way to convert between character spacing and tracking, I have a handy Soulver document here.
If you're a dev, and you want a nice category method that'll return a properly-tracked attributed string, you can find my code over on GitHub.
```objectivec
+ (instancetype) dvs_attributedStringWithString:(NSString *)string
tracking:(CGFloat)tracking
font:(UIFont *)font
{
CGFloat fontSize = font.pointSize;
CGFloat characterSpacing = tracking * fontSize / 1000;
NSDictionary *attributes = @{NSFontAttributeName: font,
NSKernAttributeName: [NSNumber numberWithFloat:characterSpacing]};
return [[NSAttributedString alloc] initWithString:string attributes:attributes];
}
```
Here's how you'd use it in practice:
```objectivec
self.label.attributedText = [NSAttributedString dvs_attributedStringWithString:@"DEVSIGN"
tracking:sender.value
font:[UIFont systemFontOfSize:17.f]];
```
In the included sample app, you can see it in action:
