SlideShare a Scribd company logo
1 of 12
Download to read offline
Dynamic Type in iOS
Priya Rajagopal
www.priyaontech.com
Twitter: @rajagp
CocoaHeads Ann Arbor
May, 2014
Fonts
!   Text content represented using fonts (UIFont)
!   Fonts = glyphs that share typeface, typestyle and size
!   Typeface : Helvetica-Neue, Arial, Times…
! TypeStyle : bold, normal, italic…
!   System Fonts
+ (UIFont *)systemFontOfSize:(CGFloat)fontSize;
+ (UIFont *)boldSystemFontOfSize:(CGFloat)fontSize;
+ (UIFont *)italicSystemFontOfSize:(CGFloat)fontSize;
!   Custom
+ (UIFont *)fontWithName:(NSString *)fontName size:(CGFloat)fontSize;
!   Text Styles …
www.priyaontech.com 2
Text Styles
!   Introduced in iOS7
! UITextKit
!   Describe intended use of text – Headings, SubHeadings,Body
!   Every text style associated with a font
+ (UIFont *)preferredFontForTextStyle:(NSString *)style
www.priyaontech.com 3
Text Style
Constants
•  UIFontTextStyleHeadline
•  UIFontTextStyleSubheadline
•  UIFontTextStyleBody
•  UIFontTextStyleFootnote
•  UIFontTextStyleCaption1
•  UIFontTextStyleCaption2
www.priyaontech.com 4
Text Styles are implemented
using Dynamic Type …
What is Dynamic Type?
!   Technology introduced in iOS7
!   Users adjust text size preferences
!   Settings
!   Accessibility
!   Apps react by dynamically adjust displayed text content
!   Enhanced Readability
!   Customized to user’s preferences
www.priyaontech.com 5
www.priyaontech.com 6
TextStyles & Dynamic Type
!   Fonts associated with text styles change dynamically based
on user preferences
!   To support dynamic type, use TextStyles
+ (UIFont *)preferredFontForTextStyle:(NSString *)style
www.priyaontech.com 7
www.priyaontech.com 8
Font Descriptors
!   Introduced in iOS7 (UIFontDescriptor)
!   Describe fonts
!   Dictionary of font attributes
UIFontDescriptorTraitsAttribute, UIFontDescriptorFamilyAttribute,
UIFontDescriptorTextStyleAttribute, UIFontDescriptorNameAttribute,
UIFontDescriptorFaceAttribute, UIFontDescriptorSizeAttribute …
!   Get/Create font from descriptor
+ (UIFont *)fontWithDescriptor:(UIFontDescriptor *)descriptor size:
(CGFloat)pointSize
!   Get descriptor for font
- (UIFontDescriptor *)fontDescriptor
www.priyaontech.com 9
Your own Text Style
(with Dynamic Type Support)
!   Get font descriptor for an existing TextStyle
UIFontDescriptor* fontDesc = [UIFontDescriptor
preferredFontDescriptorWithTextStyle:UIFontTextStyleHeadline];
!   Update descriptor.
UIFontDescriptor* updatedFontDesc = [fontDesc
fontDescriptorByAddingAttributes:@{UIFontDescriptorTraitsAttribute:@{UIFontS
ymbolicTrait:[NSNumber numberWithInteger:UIFontDescriptorTraitItalic]}}];
!   Create new font from updated font descriptor
UIFont* myFont = [UIFont fontWithDescriptor:updatedFontDesc
size:fontDesc.pointSize* scale];
* You can’t change the font family. It will be the system font type- Helvetica-Neue.
www.priyaontech.com 10
Detecting Text Size Changes
! UIContentSizeCategoryDidChangeNotification
!   Register for notification with NSNotificationCenter
!   React by invalidating existing fonts and getting new ones
!   Adjust container bounds to account for new content size
!   Auto layout
! invalidateIntrinsicContentSize/ sizeToFit
www.priyaontech.com 11
Demo
www.priyaontech.com 12

More Related Content

Viewers also liked

Contract R&D - Open Innovatie - NL
Contract R&D - Open Innovatie - NLContract R&D - Open Innovatie - NL
Contract R&D - Open Innovatie - NLinduct
 
Che viaggiatore atlando sei
Che viaggiatore atlando seiChe viaggiatore atlando sei
Che viaggiatore atlando seiAtlando Livetogo
 
Che viaggiatore atlando sei
Che viaggiatore atlando seiChe viaggiatore atlando sei
Che viaggiatore atlando seiAtlando Livetogo
 
Company presentation 2012 - KMO Innovatiebeurs
Company presentation 2012 - KMO InnovatiebeursCompany presentation 2012 - KMO Innovatiebeurs
Company presentation 2012 - KMO Innovatiebeursinduct
 
Climate & History
Climate & HistoryClimate & History
Climate & Historysusiehiner
 
Recull de noticies Territorial de Centres de les Terres de l'Ebre Gener febre...
Recull de noticies Territorial de Centres de les Terres de l'Ebre Gener febre...Recull de noticies Territorial de Centres de les Terres de l'Ebre Gener febre...
Recull de noticies Territorial de Centres de les Terres de l'Ebre Gener febre...juanpilar745
 
Free time in Alcanar
Free time in AlcanarFree time in Alcanar
Free time in Alcanarjuanpilar745
 
New York: Cosmopolis
New York: CosmopolisNew York: Cosmopolis
New York: Cosmopolissusiehiner
 
Company presentation
Company presentationCompany presentation
Company presentationinduct
 
Refer a Friend To List International Real Estate Fast and For Top Dollar
Refer a Friend To List International Real Estate Fast and For Top DollarRefer a Friend To List International Real Estate Fast and For Top Dollar
Refer a Friend To List International Real Estate Fast and For Top DollarInternational Real Estate Listings
 
Internet Studies: Scenario Audio Slideshow
Internet Studies: Scenario Audio SlideshowInternet Studies: Scenario Audio Slideshow
Internet Studies: Scenario Audio Slideshowunderwoodisb
 
Més de 70 alumnes de l'Institut Sòl-de-Riu participen a la 1ª Cursa Escolar M...
Més de 70 alumnes de l'Institut Sòl-de-Riu participen a la 1ª Cursa Escolar M...Més de 70 alumnes de l'Institut Sòl-de-Riu participen a la 1ª Cursa Escolar M...
Més de 70 alumnes de l'Institut Sòl-de-Riu participen a la 1ª Cursa Escolar M...juanpilar745
 

Viewers also liked (18)

Contract R&D - Open Innovatie - NL
Contract R&D - Open Innovatie - NLContract R&D - Open Innovatie - NL
Contract R&D - Open Innovatie - NL
 
Presentación1
Presentación1Presentación1
Presentación1
 
Altriman 2012 toni miro
Altriman 2012 toni miroAltriman 2012 toni miro
Altriman 2012 toni miro
 
Che viaggiatore atlando sei
Che viaggiatore atlando seiChe viaggiatore atlando sei
Che viaggiatore atlando sei
 
Che viaggiatore atlando sei
Che viaggiatore atlando seiChe viaggiatore atlando sei
Che viaggiatore atlando sei
 
Company presentation 2012 - KMO Innovatiebeurs
Company presentation 2012 - KMO InnovatiebeursCompany presentation 2012 - KMO Innovatiebeurs
Company presentation 2012 - KMO Innovatiebeurs
 
My activity -_thanksgiving
My activity -_thanksgivingMy activity -_thanksgiving
My activity -_thanksgiving
 
Climate & History
Climate & HistoryClimate & History
Climate & History
 
Recull de noticies Territorial de Centres de les Terres de l'Ebre Gener febre...
Recull de noticies Territorial de Centres de les Terres de l'Ebre Gener febre...Recull de noticies Territorial de Centres de les Terres de l'Ebre Gener febre...
Recull de noticies Territorial de Centres de les Terres de l'Ebre Gener febre...
 
Free time in Alcanar
Free time in AlcanarFree time in Alcanar
Free time in Alcanar
 
Alcanar events
Alcanar eventsAlcanar events
Alcanar events
 
New York: Cosmopolis
New York: CosmopolisNew York: Cosmopolis
New York: Cosmopolis
 
Moodle
MoodleMoodle
Moodle
 
Company presentation
Company presentationCompany presentation
Company presentation
 
1950 årene mediahistoriene
1950 årene mediahistoriene1950 årene mediahistoriene
1950 årene mediahistoriene
 
Refer a Friend To List International Real Estate Fast and For Top Dollar
Refer a Friend To List International Real Estate Fast and For Top DollarRefer a Friend To List International Real Estate Fast and For Top Dollar
Refer a Friend To List International Real Estate Fast and For Top Dollar
 
Internet Studies: Scenario Audio Slideshow
Internet Studies: Scenario Audio SlideshowInternet Studies: Scenario Audio Slideshow
Internet Studies: Scenario Audio Slideshow
 
Més de 70 alumnes de l'Institut Sòl-de-Riu participen a la 1ª Cursa Escolar M...
Més de 70 alumnes de l'Institut Sòl-de-Riu participen a la 1ª Cursa Escolar M...Més de 70 alumnes de l'Institut Sòl-de-Riu participen a la 1ª Cursa Escolar M...
Més de 70 alumnes de l'Institut Sòl-de-Riu participen a la 1ª Cursa Escolar M...
 

Similar to Dynamic types in iOS

User Defined Characters and SVG Fonts
User Defined Characters and SVG FontsUser Defined Characters and SVG Fonts
User Defined Characters and SVG FontsJun Fujisawa
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?Greg Veen
 
How to add Custom Font to your iOS-based App?
How to add Custom Font to your iOS-based App?How to add Custom Font to your iOS-based App?
How to add Custom Font to your iOS-based App?Neev Technologies
 
Visual Experience 360 Flex
Visual Experience 360 FlexVisual Experience 360 Flex
Visual Experience 360 FlexJuan Sanchez
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011RZasadzinski
 
Typography for WordPress
Typography for WordPressTypography for WordPress
Typography for WordPressNile Flores
 
Enhance the Look of Your App With Text Kit
Enhance the Look of Your App With Text KitEnhance the Look of Your App With Text Kit
Enhance the Look of Your App With Text KitMatteo Battaglio
 
User Defined Characters Solution Proposal
User Defined Characters Solution ProposalUser Defined Characters Solution Proposal
User Defined Characters Solution ProposalJun Fujisawa
 
Web Fonts @ Douban Read
Web Fonts @ Douban ReadWeb Fonts @ Douban Read
Web Fonts @ Douban Readhoukanshan
 
Intro To Flex Typography 360|Flex
Intro To Flex Typography 360|FlexIntro To Flex Typography 360|Flex
Intro To Flex Typography 360|FlexMatt Guest
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fontsFour Kitchens
 
Formatting text with CSS
Formatting text with CSSFormatting text with CSS
Formatting text with CSSNicole Ryan
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsYves Van Goethem
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalAshok Modi
 
Typography On The Web
Typography On The WebTypography On The Web
Typography On The WebJustin Seiter
 

Similar to Dynamic types in iOS (20)

Core text
Core textCore text
Core text
 
User Defined Characters and SVG Fonts
User Defined Characters and SVG FontsUser Defined Characters and SVG Fonts
User Defined Characters and SVG Fonts
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?
 
How to add Custom Font to your iOS-based App?
How to add Custom Font to your iOS-based App?How to add Custom Font to your iOS-based App?
How to add Custom Font to your iOS-based App?
 
Visual Experience 360 Flex
Visual Experience 360 FlexVisual Experience 360 Flex
Visual Experience 360 Flex
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
 
Typography for WordPress
Typography for WordPressTypography for WordPress
Typography for WordPress
 
Enhance the Look of Your App With Text Kit
Enhance the Look of Your App With Text KitEnhance the Look of Your App With Text Kit
Enhance the Look of Your App With Text Kit
 
User Defined Characters Solution Proposal
User Defined Characters Solution ProposalUser Defined Characters Solution Proposal
User Defined Characters Solution Proposal
 
Web Fonts @ Douban Read
Web Fonts @ Douban ReadWeb Fonts @ Douban Read
Web Fonts @ Douban Read
 
Intro To Flex Typography 360|Flex
Intro To Flex Typography 360|FlexIntro To Flex Typography 360|Flex
Intro To Flex Typography 360|Flex
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
 
Chap7
Chap7Chap7
Chap7
 
Німецька 7
Німецька 7Німецька 7
Німецька 7
 
Formatting text with CSS
Formatting text with CSSFormatting text with CSS
Formatting text with CSS
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the web
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for Drupal
 
Typography On The Web
Typography On The WebTypography On The Web
Typography On The Web
 

Dynamic types in iOS

  • 1. Dynamic Type in iOS Priya Rajagopal www.priyaontech.com Twitter: @rajagp CocoaHeads Ann Arbor May, 2014
  • 2. Fonts !   Text content represented using fonts (UIFont) !   Fonts = glyphs that share typeface, typestyle and size !   Typeface : Helvetica-Neue, Arial, Times… ! TypeStyle : bold, normal, italic… !   System Fonts + (UIFont *)systemFontOfSize:(CGFloat)fontSize; + (UIFont *)boldSystemFontOfSize:(CGFloat)fontSize; + (UIFont *)italicSystemFontOfSize:(CGFloat)fontSize; !   Custom + (UIFont *)fontWithName:(NSString *)fontName size:(CGFloat)fontSize; !   Text Styles … www.priyaontech.com 2
  • 3. Text Styles !   Introduced in iOS7 ! UITextKit !   Describe intended use of text – Headings, SubHeadings,Body !   Every text style associated with a font + (UIFont *)preferredFontForTextStyle:(NSString *)style www.priyaontech.com 3
  • 4. Text Style Constants •  UIFontTextStyleHeadline •  UIFontTextStyleSubheadline •  UIFontTextStyleBody •  UIFontTextStyleFootnote •  UIFontTextStyleCaption1 •  UIFontTextStyleCaption2 www.priyaontech.com 4 Text Styles are implemented using Dynamic Type …
  • 5. What is Dynamic Type? !   Technology introduced in iOS7 !   Users adjust text size preferences !   Settings !   Accessibility !   Apps react by dynamically adjust displayed text content !   Enhanced Readability !   Customized to user’s preferences www.priyaontech.com 5
  • 7. TextStyles & Dynamic Type !   Fonts associated with text styles change dynamically based on user preferences !   To support dynamic type, use TextStyles + (UIFont *)preferredFontForTextStyle:(NSString *)style www.priyaontech.com 7
  • 9. Font Descriptors !   Introduced in iOS7 (UIFontDescriptor) !   Describe fonts !   Dictionary of font attributes UIFontDescriptorTraitsAttribute, UIFontDescriptorFamilyAttribute, UIFontDescriptorTextStyleAttribute, UIFontDescriptorNameAttribute, UIFontDescriptorFaceAttribute, UIFontDescriptorSizeAttribute … !   Get/Create font from descriptor + (UIFont *)fontWithDescriptor:(UIFontDescriptor *)descriptor size: (CGFloat)pointSize !   Get descriptor for font - (UIFontDescriptor *)fontDescriptor www.priyaontech.com 9
  • 10. Your own Text Style (with Dynamic Type Support) !   Get font descriptor for an existing TextStyle UIFontDescriptor* fontDesc = [UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleHeadline]; !   Update descriptor. UIFontDescriptor* updatedFontDesc = [fontDesc fontDescriptorByAddingAttributes:@{UIFontDescriptorTraitsAttribute:@{UIFontS ymbolicTrait:[NSNumber numberWithInteger:UIFontDescriptorTraitItalic]}}]; !   Create new font from updated font descriptor UIFont* myFont = [UIFont fontWithDescriptor:updatedFontDesc size:fontDesc.pointSize* scale]; * You can’t change the font family. It will be the system font type- Helvetica-Neue. www.priyaontech.com 10
  • 11. Detecting Text Size Changes ! UIContentSizeCategoryDidChangeNotification !   Register for notification with NSNotificationCenter !   React by invalidating existing fonts and getting new ones !   Adjust container bounds to account for new content size !   Auto layout ! invalidateIntrinsicContentSize/ sizeToFit www.priyaontech.com 11