iOS'te Tipografi

Transcript

1. iOS ve Tipogra f Mul ti Group Mobile Meet Up Mayıs 2024 Seyfeddin Başsaraç
2. Tipogra fi Nedir?
3. Tipogra fi ≠ Font Seçmek
4. Tipogra fi Nedir?
5. Typography honors the text.
7. Yazıyı tasarlamadan önce onu okuyun.
8. Yazının hissiyatını ve tonunu yansıtacak bir yüz seçin.
9. JUST DO IT.
10. JUST DO IT.
11. Teknik kısıtlamalar
13. Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and W ebd ings Web Fontlardan önce Web Tasarım
14. sIFR (Scalable Inman Flash Replacement)
15. Web Fonts (2008 - 2012 - Today)
16. iOS?
17. Crea ti ve Developer
18. nsistanbul.com
19. kanvas.istanbul
21. @seyfoyun
22. Ana Metin Yazıları (Body Text)
23. Kitap Tasarımı
24. Measure (Yazı Alanı)
25. Okunması kolay: Satırlarda ortalama 45-75 karakter arası
26. Ar t ık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Ar t ık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Ar t ık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Gabriola 27/30/33pt Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Chronicle Display 27/30/33pt Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Domaine Text 27/30/33pt
27. Yazıyı ayarlama Times Roman 12pt / 12pt
28. Yazıyı ayarlama Albertina Fontu 12pt/12pt Times Roman 12pt / 12pt
29. Yazıyı ayarlama Punto Küçültülüyor 10.5 / 12pt Albertina Fontu 12/12pt
30. Yazıyı ayarlama Word Spacing Arttırılıyor Punto Küçültülüyor 10.5 / 12pt
31. Yazıyı ayarlama Justi fi ed Word Spacing Arttırılıyor
32. Yazıyı ayarlama Yazı genişliği(measure) kısılıyor Justi fi ed
33. Yazıyı ayarlama Leading Arttırılıyor 10.5/13.5pt Yazı genişliği(measure) kısılıyor
34. readableContentGuide: UILayoutGuide UIView
35. readableContentGuide: UILayoutGuide UIView
36. readableContentGuide: UILayoutGuide UIView
37. readableContentGuide: UILayoutGuide UIView
38. readableContentGuide: UILayoutGuide UIView
39. Otoma ti k leading genelde dar olur.
40. Genel kural: Line Height (line-spacing), kelimeler arası (word-spacing) boşluktan biraz fazla olmalı
41. NSParagraphStyle var lineHeightMultiple: CGFloat Fontun varsayılan leading değeri * lineHeightMul ti ple var minimumLineHeight: CGFloat Bir satırın alacağı minimum genişlik var maximumLineHeight: CGFloat Bir satırın alacağı maksimum genişlik var lineSpacing: CGFloat Bir satırın alt çizgisi ile diğer satırın üst çizgisi arasındaki mesafe
42. NSParagraphStyle
43. NSParagraphStyle
44. NSParagraphStyle
46. Fakat iPhone ekranları çok dar.
47. Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Vâkıa korkak bir adam değildi. Ama, muhakkak bir ölümü her gün, her saat, her dakika, hatta her saniye beklemek... Onun cesaretini kırmış, sinirlerini zayı fl atmıştı. 37pt Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Vâkıa korkak bir adam değildi. Ama, muhakkak bir ölümü her gün, her saat, her dakika, hatta her saniye beklemek... Onun cesaretini kırmış, sinirlerini zayı fl atmıştı. Evet, ya kafası kesilecek, ya boğulacaktı! 37pt
48. Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Vâkıa korkak bir adam değildi. Ama, muhakkak bir ölümü her gün, her saat, her dakika, hatta her saniye beklemek... Onun cesaretini kırmış, sinirlerini zayı fl atmıştı. 37pt Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Vâkıa korkak bir adam değildi. Ama, muhakkak bir ölümü her gün, her saat, her dakika, hatta her saniye beklemek... Onun cesaretini kırmış, sinirlerini zayı fl atmıştı. Evet, ya kafası kesilecek, ya boğulacaktı! 40pt
49. Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Vâkıa korkak bir adam değildi. Ama, muhakkak bir ölümü her gün, her saat, her dakika, hatta her saniye beklemek... Onun cesaretini kırmış, sinirlerini zayı fl atmıştı. Evet, ya kafası kesilecek, ya boğulacaktı! Adobe Garamond Pro Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selametiydi. Vâkıa korkak bir adam değildi. Ama, muhakkak bir ölümü her gün, her saat, her dakika, hatta her saniye beklemek... Onun cesaretini kırmış, sinirlerini zayıflatmıştı. Evet, ya kafası kesilecek, ya boğulacaktı! Gotham Condensed
50. SF Compact
51. Büyük har fl i başlıklar ENGLISH POETRY IN THE TWENTIETH CENTURY E N G L I S H P O E T RY I N T H E T W E N T I E T H C E N T U RY
52. Justi fi ed Text
53. Yazıyı ayarlama Justi fi ed Word Spacing Arttırılıyor
55. Jus ti fi ed Text on iOS
56. Hyphena ti on
57. Jus ti fi ed Text let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.hyphenationFactor = 1.0 paragraphStyle.alignment = .justified
58. Jus ti fi ed Text let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.hyphenationFactor = 1.0 paragraphStyle.alignment = .justified
59. Jus ti fi ed Text let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.hyphenationFactor = 1.0 paragraphStyle.alignment = .justified
60. Jus ti fi ed Text let attributedString = NSAttributedString( string: text, attributes: [ .font : font, .foregroundColor: UIColor.black, .paragraphStyle: paragraphStyle ] )
61. First Line Indent let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.hyphenationFactor = 1.0 paragraphStyle.alignment = .justified paragraphStyle.firstLineHeadIndent = font.capHeight*1.5
62. A ft er Paragraph Spacing let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.paragraphSpacing = font.capHeight/2.0 paragraphStyle.paragraphSpacingBefore = 0.0
63. Font Özellikleri Ligatures, Frac ti ons, Ordinals
64. Font Özellikleri Propor ti onal Tabular
65. Font Özellikleri Propor ti onal Tabular
66. Font Özellikleri - iOS
67. Font Özellikleri - iOS { CTFeatureTypeIdentifier = 0; CTFeatureTypeName = "All Typographic Features"; CTFeatureTypeNameID = "-100"; CTFeatureTypeSelectors = ( { CTFeatureSelectorDefault = 1; CTFeatureSelectorIdentifier = 0; CTFeatureSelectorName = On; CTFeatureSelectorNameID = "-101"; } ); }, { CTFeatureTypeIdentifier = 1; CTFeatureTypeName = Ligatures; CTFeatureTypeNameID = "-200"; CTFeatureTypeSelectors = ( { CTFeatureSelectorDefault = 1; CTFeatureSelectorIdentifier = 2; CTFeatureSelectorName = "Common Ligatures"; CTFeatureSelectorNameID = "-203";
68. Font Özellikleri - iOS
69. Font Özellikleri - iOS https://developer.apple.com/fonts/ https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/ AppendixF.html
70. Font Özellikleri - Swi ft UI .monospaced() .monospacedDigit() .kerning(CGFloat) .tracking(CGFloat)
71. Accessibility & Internationalization
72. Yazıları herkes okuyabilmeli.
73. Font ayrımı MERHABA Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selame ti ydi. Vâkıa korkak bir adam değildi. Ama, muhakkak bir ölümü her gün, her saat, her dakika, hatta her saniye beklemek... Onun cesare ti ni kırmış, sinirlerini zayı fl atmıştı. Evet, ya kafası kesilecek, ya boğulacaktı!
74. Font ayrımı 著者略歴 品格ある執事の道を追求し続けてきたスティーブンス は、短い旅に出た。美しい 田 園 風 景の道すがら様々な思 い出がよぎる。 長 年仕えたダーリントン卿への敬慕、執 事の鑑だった亡 父 、 女 中頭への淡い想い、 二 つの 大 戦の 間に邸内で催された重要な外交会議の数々―過ぎ去りし 思い出は、輝きを増して胸のなかで 生 き続ける。失われ つつある伝統的な英国を描いて世界中で 大 きな感動を呼 んだ英国最 高 の 文 学賞、ブッカー賞受賞作。
75. Font ayrımı M E R H A B A Artık dünyaya dair hiçbir ümidi kalmamıştı. İstediği yalnız bir iman selame ti ydi. Vâkıa korkak bir adam değildi. Ama, muhakkak bir ölümü her gün, her saat, her dakika, hatta her saniye beklemek... Onun cesare ti ni kırmış, sinirlerini zayı fl atmıştı. Evet, ya kafası kesilecek, ya boğulacaktı!
76. Font ayrımı 著者略歴 品格ある執事の道を追求し続けてきたスティーブンス は、短い旅に出た。美しい 田 園 風 景の道すがら様々な思 い出がよぎる。 長 年仕えたダーリントン卿への敬慕、執 事の鑑だった亡 父 、 女 中頭への淡い想い、 二 つの 大 戦の 間に邸内で催された重要な外交会議の数々―過ぎ去りし 思い出は、輝きを増して胸のなかで 生 き続ける。失われ つつある伝統的な英国を描いて世界中で 大 きな感動を呼 んだ英国最 高 の 文 学賞、ブッカー賞受賞作。
77. Font ayrımı ةءارــــــق ةحاتم يهو ةيبرعلا ةغللاب ةينورتكلإلا بتكلا فالآب عاتمتسالا كنكمي .معن ىلع ةيبرعلا ةغللاب بتكلا ةءارق كنكمي امنيب هنأ ظحال ىلع نآلا حفصتلا ةذفانو مئاوقلا نأ الإ ،يناجملا قيبطتو كب صاخلا ينورتكلإلائراق ةيلاطيإلاو ةيسنرفلاو ةيناملألاو ةينابسإلاو ةيزيلجنإلا ةغللاب طقف ةرفوتم ةطسبملا ةينيصلاو ةيسورلاو ةينابايلاو ةيدنلوهلاو ةيلاغتربلاو.
78. Renk Uyumu
79. Renk Uyumu https://contrast-ratio.com/
80. Dynamic Type
81. Dynamic Type
82. Dynamic Type
83. Dynamic Type
84. Dynamic Type
85. Custom Fonts? iOS11+ https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
86. Custom Fonts? iOS11+
87. Custom Fonts? iOS11+ https://useyourloaf.com/blog/using-a-custom-font-with-dynamic-type/
88. Custom Fonts? iOS11+ https://useyourloaf.com/blog/using-a-custom-font-with-dynamic-type/
89. Accessibility Inspector
90. Accessibility Inspector
91. Accessibility Inspector
92. Environment Overrides
93. SVG Fonts
94. SVG Fonts OTSVG.framework
95. SVG Fonts <= iOS11
96. Sunuma Giremeyen Konular
97. Sunuma Giremeyen Konular - TextKit 2 - NSTextContainer, NSLayoutManager - NSStringDrawingOp ti ons - CoreText - CTFramesetter, CTLinesetter, CTGlyph - UIBezierPathText Drawings - Metal Text Rendering & CIFilters
98. Sunuma Giremeyen Konular - Gutenberg - Macintosh ve Font Kataloğu - Postscript - TrueType (TTF) ve OpenType(OTF)
99. Sunum Sonrası
100. Elements of Typographic Style
101. Book Typography: A Designer’s Manual
102. Thinking With Type
103. On Web Typography
104. Teşekkürler @seyfoyun