Typographie to go! @ Mobile Tech Con 2014, Berlin

Typographie to go!
Benjamin Reimold

About me
Codenauts GmbH
www.codenauts.com
Überall (Stuttgart – Berlin)
!
Benjamin Reimold
benjamin@hockeyapp.net
@elektrojunge
elektrojunge.de
!
MobileMaultaschen.de

Above all, text must be legible. If users can’t read the words in
your app, it doesn’t matter how beautiful the typography is.
– Apple Human Interface Guidelines

The Android design language relies on traditional typographic
tools such as scale, space, rhythm, and alignment with an
underlying grid. Successful deployment of these tools is essential
to help users quickly understand a screen of information.
– Design Guideline for Android by Google

Typography is at the heart of the Microsoft design language. Each
of the Microsoft design principles reinforces the importance of
typography.
– Guidelines for Typography by Microsoft

Der Mensch vor dem Bildschirm wird
immer nach einem Grund suchen,
die App nicht benutzen zu „müssen“.

Schrift
Das Aussehen von Zeichen und Symbolen
Font
Die physische Repräsentation der Schrift
Glyphe
Die Darstellung eines Schriftzeichens

k-Linie H-Linie
x-Linie Typographie
Grundlinie p-Linie

Kerning
Weitere Begriffe
Ligatur

http://shahirzag.com/post/31387507569/sacrilege-in-helvetica-bold
Serifen
Monospace
Sperrsatz
Zeilenabstand

This is not a typeface. It’s a tossed salad. Or a four-headed
Frankenstein. You never know which personality you’ll get.
- Stephen Coles (typographica.org)

Die neue Roboto
https://plus.google.com/+googledesign/posts/Gfd7FRskeHm

It’s a MONOTYPE to rule them all!

Howto lie down layout
https://www.flickr.com/photos/superfantastic/65578354

Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin'
house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker,
know what I'm sayin'?Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll the motherfucker, know what I'm sayin’? The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny
evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. Look, just
because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house,
fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know I'm sayin’? You think water moves fast? You should see ice. It moves like it has a mind.Like it knows it killed the world once and got for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking that killed the other two, but it Lorem wasn't. Nature is lethal Ipsum but it doesn't hold a Dolor candle to man. Look, Sic
now. We said we'd say it was the snow
just because I don't be givin' no man foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks.
Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?Look, just because don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin’?
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy brothers. And you will know My name is the Lord when I lay My vengeance upon thee. Look, just because I don't be givin' no man a foot
massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks.
Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin’? You think water moves
fast? You should see ice. It moves like it has a mind.Like it knows it killed the world once and got a taste for murder. After the avalanche, took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it Nature is lethal but it doesn't hold a candle to man.

Rechtschreibung, macht sexy.
Richtige Zeichenwal – ebenfalls´.

Zusammengefasst:
• Typographie ist wichtig!
• Schrift - Font - Glyphen
• Linien, Serifen & Ko.
• Mit Typographie scherzt man nicht.
• „Welchen Font hätten Sie denn gern?“
• Howto layout
• Kennsch du Sprache!

UIWebView
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"somePage"
ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:htmlFile
encoding:NSUTF8StringEncoding
error:nil];
[self.awesomeWebView loadHTMLString:htmlString baseURL:nil];

Native Typographie
iOS 3.2 / iOS 4
CoreText & NSAttributedString
iOS 6
UILabel & UITextView support NSAttributedString
iOS 7
TextKit

NSHTMLTextDocumentType
NSDictionary *options = @{NSDocumentTypeDocumentAttribute:
NSHTMLTextDocumentType} ;
NSAttributedString *stringWithHTMLAttributes =
[[NSAttributedString alloc] initWithFileURL:url
options:options
documentAttributes:nil
error:nil];
!
[self.justSomeLabel setAttributedText:stringWithHTMLAttributes];

NSString *markdown = [NSString stringWithContentsOfFile:path
encoding:NSUTF8StringEncoding
error:nil];
NSString *html = [MMMarkdown HTMLStringWithMarkdown:markdown error:nil];
!
NSDictionary *options = @{NSDocumentTypeDocumentAttribute:
NSHTMLTextDocumentType};
!
NSError *error;
NSAttributedString *formatted = [[NSAttributedString alloc]
initWithData:[html dataUsingEncoding:NSUTF16StringEncoding]
options:options
documentAttributes:nil
error:&error];
!
self.awesomTextView.attributedText = formatted;

Codenauts töten gerne böse Käfermit HockeyApp.

NSAttributedString
Codenauts töten gerne böse Käfer
mit HockeyApp.
NSString *text = @"Codenauts töten gerne böse Käfer mit HockeyApp.“;
!
NSDictionary *attrs =
@{ NSFontAttributeName : [UIFont systemFontOfSize:36]};
!
NSMutableAttributedString *as = [[NSMutableAttributedString alloc]
initWithString:text
attributes:attrs];

Codenauts töten gerne böse Käfer
mit HockeyApp.
[as addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:
36] range:[text rangeOfString:@"Codenauts"]];
!
[as addAttribute:NSForegroundColorAttributeName value:[UIColor redColor]
range:[text rangeOfString:@"gerne"]];
!
[as addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:18]
range:[text rangeOfString:@"Käfer"]];
!
[as addAttribute:NSBackgroundColorAttributeName value:[UIColor
purpleColor] range:[text rangeOfString:@"mit HockeyApp"]];
!
UIFont *awesomeFont = [UIFont fontWithName:@"AmericanTypewriter" size:
27.0f];
!
[as addAttribute:NSFontAttributeName value:awesomeFont range:[text
rangeOfString:@"HockeyApp"]];
!
self.awesomeTextView.attributedText = as;

4 Debugging
NSRange range = NSMakeRange (0, as.length);
[as enumerateAttributesInRange: range
options: 0
usingBlock: ^(NSDictionary *attributes,
NSRange range, BOOL *stop) {
NSLog (@"range: %@ attributes: %@", NSStringFromRange(range),
attributes);
}];
2014-08-31 12:07:23.503 TypographieToGo[5831:367954]
range: {37, 9} attributes: {
NSBackgroundColor = "UIDeviceRGBColorSpace 0.5 0 0.5 1";
NSFont = "<UICTFont: 0x7fafd41017a0> font-family: "American
Typewriter"; font-weight: normal; font-style: normal; font-size:
27.00pt";
}

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the
world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know
exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it
out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two,
but it wasn't. Nature is lethal but it doesn't hold a candle to man.
The path of the righteous man is beset on all sides by the iniquities of the selfish and the
tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak
through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I
will strike down upon thee with great vengeance and furious anger those who would attempt to poison
and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the
world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know
exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it
out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two,
but it wasn't. Nature is lethal but it doesn't hold a candle to man.

NSParagraphStyleAttributeName
NSMutableParagraphStyle *generalStyle = [[NSMutableParagraphStyle alloc]
init];
[generalStyle setParagraphSpacing:27.0];
[generalStyle setFirstLineHeadIndent:10.0];
[generalStyle setAlignment:NSTextAlignmentJustified];
!
NSMutableAttributedString *formatted = [[NSMutableAttributedString alloc]
initWithString:slipsumText
attributes:@{NSParagraphStyleAttributeName: generalStyle}];

NSParagraphStyleAttributeName
NSUInteger secondParagraphStart = NSMaxRange([formatted.string
rangeOfString:@"n" ]);
NSMutableParagraphStyle *secondParagraphStyle =
[[formatted attribute:NSParagraphStyleAttributeName
atIndex:secondParagraphStart
effectiveRange:NULL] mutableCopy];
secondParagraphStyle.headIndent += 20.0;
secondParagraphStyle.firstLineHeadIndent += 20.0;
secondParagraphStyle.tailIndent -= 20.0;
!
[formatted addAttribute:NSParagraphStyleAttributeName
value:secondParagraphStyle
range:NSMakeRange(secondParagraphStart, 1)];
!
self.awesomeTV.attributedText = formatted;

Dynamic Type
+ (UIFont *) preferredFontForTextStyle: (NSString *)style
UIContentSizeCategoryDidChangeNotification
- (void)userChangedTextSize:(NSNotification *)notification {
self.awesomeLab.font = [UIFont
preferredFontForTextStyle:UIFontTextStyleBody];
}
@property (nonatomic, readonly) NSString*preferredContentSizeCategory;

Geht’s auch dynamisch?!
https://www.flickr.com/photos/tudor/7305737304

MTStringAttributes
MTStringAttributes *general = [MTStringAttributes new];
general.font = [UIFont systemFontOfSize:36];
general.textColor = [UIColor redColor];
general.kern = 0.8f;

MTStringParser *parser = [MTStringParser sharedParser];
[parser setDefaultAttributes:general];
[parser addStyleWithTagName:@"codenauts" font:[UIFont
boldSystemFontOfSize:36]];
[parser addStyleWithTagName:@"gerne" font:sysFont color:[UIColor
redColor]];
[parser addStyleWithTagName:@"bugs" font:[UIFont systemFontOfSize:18]];
[parser addStyleWithTagName:@"mit"
font:sysFont
color:black
backgroundColor:[UIColor purpleColor]
strikethrough:NO
underline:NO];
[parser addStyleWithTagName:@"HockeyApp"
font:[UIFont fontWithName:@"AmericanTypewriter"
size:27.0f]];
NSString *markup = @"<codenauts>Codenauts</codenauts> töten <gerne>gerne</
gerne> böse <bugs>Käfer</bugs> <mit>mit <HockeyApp>HockeyApp</HockeyApp></
mit>.";
NSAttributedString *attributedString = [[MTStringParser sharedParser]
attributedStringFromMarkup:markup];

TTTAttributedLabel
- (void) basicFormatting {
self.tttAttributedLabel.numberOfLines = 0;
self.tttAttributedLabel.textAlignment = NSTextAlignmentLeft;
self.tttAttributedLabel.lineBreakMode = NSLineBreakByWordWrapping;
self.tttAttributedLabel.backgroundColor = [UIColor clearColor];
self.tttAttributedLabel.textInsets =
(UIEdgeInsets){ .left = 10, .top = 10, .right = 10, .bottom = 10 };
}
@property (nonatomic, strong) NSDictionary *linkAttributes;
NSDictionary *linkAttributes =
[NSDictionary dictionaryWithObjectsAndKeys:
(__bridge id) fontColor.CGColor, (__bridge NSString *) kCTForegroundColorAttributeName,
headerCTFont, (__bridge NSString *) kCTFontAttributeName,
@(kCTUnderlineStyleSingle), (__bridge NSString *) kCTUnderlineStyleAttributeName,
(__bridge id) paragraphRef, (__bridge id) kCTParagraphStyleAttributeName,
NULL];
- (void)attributedLabel:(TTTAttributedLabel *)label didSelectLinkWithURL:(NSURL *)url;

CoreText?
https://www.flickr.com/photos/superfantastic/65578354

You think water moves fast? You
should see ice. It moves like it has a
mind. Like it knows it killed the world
once and got a taste for murder. After
the avalanche, it took us a week to
climb out. Now, I don't know exactly
when we turned on each other, but I
know that seven of us survived the
slide... and only five made it out. Now
we took an oath, that I'm breaking
that killed the other two, but it
wasn't. Nature is lethal but it doesn't
hold a candle to man. You think water
moves fast? You should see ice. It
moves like it has a mind. Like it
knows it killed the world once and
got a taste for murder. After the
avalanche, it took us a week to climb
out. Now, I don't know exactly when
we turned on each other, but I know
that seven of us survived the slide...
and only five made it out. Now we
took an oath, that I'm breaking now.
We said we'd say it was the snow that
killed the other two, but it wasn't.
Nature is lethal but it doesn't hold a
candle to man. You think water moves
fast? You should see ice. It moves like
it has a mind. Like it knows it killed
the world once and got a taste for
murder. After the avalanche, it took
us a week to climb out. Now, I don't
know exactly when we turned on each
other, but I know that seven of us
survived the slide... and only five
made it out. Now we took an oath,
that I'm breaking now. We said we'd
say it was the snow that killed the
other two, but it wasn't. Nature is
lethal but it doesn't hold a candle to
man. You think water moves fast? You
should see ice. It moves like it has a
mind. Like it knows it killed the world
once and got a taste for murder. After
the avalanche, it took us a week to
climb out. Now, I don't know exactly
when we turned on each other, but I
know that seven of us survived the
slide... and only five made it out. Now
we took an oath, that I'm breaking
that killed the other two, but it
wasn't. Nature is lethal but it doesn't
hold a candle to man. You think water
moves fast? You should see ice. It
moves like it has a mind. Like it
knows it killed the world once and
got a taste for murder. After the
avalanche, it took us a week to climb
out. Now, I don't know exactly when
we turned on each other, but I know
that seven of us survived the slide...
and only five made it out. Now we
took an oath, that I'm breaking now.
We said we'd say it was the snow that
killed the other two, but it wasn't.
Nature is lethal but it doesn't hold a
candle to man.

So, Core-Text.
Framesetter
!
Typesetter
!
Line
!
Run
!
Glyph

// in drawRect:
// Init context and matrix
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
!
CFAttributedStringRef attrString = (__bridge CFTypeRef) self.attributedString;
CTFramesetterRef framesetter =
CTFramesetterCreateWithAttributedString(attrString);
!
CFArrayRef paths = [self copyPaths];
CFIndex pathCount = CFArrayGetCount(paths);
CFIndex charIndex = 0;
for(CFIndex pathIndex = 0; pathIndex < pathCount; ++pathIndex) {
CGPathRef path = CFArrayGetValueAtIndex(paths, pathIndex);
CTFrameRef frame = CTFramesetterCreateFrame(framesetter,
CFRangeMake(charIndex, 0),
path,
NULL);
CTFrameDraw(frame, context);
CFRange frameRange = CTFrameGetVisibleStringRange(frame);
charIndex += frameRange.length;
CFRelease(frame);
}
CFRelease(paths);
CFRelease(framesetter);

Alberner Kram geht auch ;-)
should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.
After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other,
but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm
breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
doesn't hold a candle to man. You think water moves fast? You should see ice. It moves like
it has a mind. Like it knows it killed the world once and got a taste for murder. After the
avalanche, it took us a week to climb out. Now, I don't know exactly when we turned
on each other, but I know that seven of us survived the slide... and only five made it
out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow
that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to
man. You think water moves fast? You should see ice. It moves like it has a mind. Like it
knows it killed the world once and got a taste for murder. After the avalanche, it took us a
week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven
of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. After the
avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know
that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle

Alberner Kram geht auch ;-)
should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.
After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other,
but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm
breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
doesn't hold a candle to man. You think water moves fast? You should see ice. It moves like
UIBezierPath *pathForRoundView =
it has a mind. Like it knows it killed the world once and got a taste for murder. After the
[self.avalanche, roundView it took us curvePathWithOrigin:a week to climb out. Now, I don't self.know roundView.exactly when center];
we turned
on each other, but I know that seven of us survived the slide... and only five made it
out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow
that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to
man. You think water moves fast? You should see ice. It moves like it has a mind. Like it
knows it killed the world once and got a taste for murder. After the avalanche, it took us a
self.awesomeTV.textContainer.exclusionPaths = @[pathForRoundView];
week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven
of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. After the
avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know
that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle

TextKit
NSLayoutManager
eigener NSTextStorage aka „Container für NSAttributedString“
NSTextContainer

WebView
HTML.fromHtml(String resource)
TextView + SpannableStringBuilder
canvas.drawText(….) ?
android.text.style

Zusammengefasst:
• iOS7+ Typographie macht so richtig Spaß
• NSAttributedString für Schrift & Zeichen
• TextKit für Layout
• CoreText für die letzten 5%?
• <iOS7 NSAttributedString + Yak Shaving
• Android: kann Html-style Typographie

Danke für’s zuhören!
Codenauts GmbH
www.codenauts.com
Überall (Stuttgart – Berlin)
!
Benjamin Reimold
benjamin@hockeyapp.net
@elektrojunge
elektrojunge.de
Fragen?

Typographie to go! @ Mobile Tech Con 2014, Berlin

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Typographie to go! @ Mobile Tech Con 2014, Berlin

Similar a Typographie to go! @ Mobile Tech Con 2014, Berlin (14)

Más de Benny Reimold

Más de Benny Reimold (9)

Último

Último (20)

Typographie to go! @ Mobile Tech Con 2014, Berlin