📰 Consistent & accessible visual styling on iOS with support for Dynamic Type.
TypographyKit makes it easy to define typography styles and colour palettes in your iOS app helping you achieve visual consistency in your design as well as supporting Dynamic Type even when using custom fonts. [Summary] [Detailed]
To learn more about how to use TypographyKit, take a look at the table of contents below:
fontTextStyleNamekey path String to the name of your typography style in IB).
TypographyKit 4.0.0 introduces support for SwiftUI. In order to make use of TypographyKit with SwiftUI, create a TypographyKit configuration file (either JSON or PList) and an extension on
UIFontTextStyleas described in the Usage section, then simply apply your typography style to a SwiftUI
Textview as follows:
Text("An example using TypographyKit with SwiftUI") .typography(style: .interactive)
A letter case may be applied directly to the String as follows:
"An example using TypographyKit with SwiftUI" .letterCase(style: .interactive)
This results in the letter case defined for the specified typography style (in config) being applied.
TypographyKit 3.0.0 supports Xcode 11 and dark mode in iOS 13 and supports iOS 8.2 and above. The last version supporting Xcode 10 and targeting the iOS 12 SDK is version 2.2.3.
TypographyKit 2.0.0 brings support for Swift 5.0. The previous version supporting Swift 4.2 is version 1.1.5.
If you require the Swift 4.2 version then in your
Podfile:
pod "TypographyKit" "~> 1.1.5"
Or if you are using Carthage add the following to your
Cartfile:
github "rwbutler/TypographyKit" ~> 1.1.5
In TypographyKit 1.1.5 is now possible to reference the system font or system font and weight as part of your configuration by setting the
font-nameproperty value to
Systemor e.g.
System-Boldto additionally specify the font weight.
It is now possible to use
UIFontMetricsto scale fonts where iOS 11 is available and using the system-provided
UIFont.TextStyleoptions only by setting the
scaling-modeproperty in the configuration file. Allowable values include
stepping(default behavior),
uifontmetricsand
uifontmetrics-with-fallback. See
CHANGELOG.md.
CocoaPods is a dependency manager which integrates dependencies into your Xcode workspace. To install it using RubyGems run:
gem install cocoapods
To install TypographyKit using Cocoapods, simply add the following line to your Podfile:
pod "TypographyKit"
Then run the command:
pod install
For more information see here.
Carthage is a dependency manager which produces a binary for manual integration into your project. It can be installed via Homebrew using the commands:
brew update brew install carthage
In order to integrate TypographyKit into your project via Carthage, add the following line to your project's Cartfile:
github "rwbutler/TypographyKit"
From the macOS Terminal run
carthage update --platform iOSto build the framework then drag
TypographyKit.frameworkinto your Xcode project.
For more information see here.
An example app exists in the Example directory to provide some pointers on getting started.
Include a TypographyKit.plist as part of your app project (example) in which you define your typography styles.
ui-font-text-styles heading font-name Avenir-Medium point-size 36
Or if you prefer to use JSON you may include a TypographyKit.json (example) instead.
Define additional UIFontTextStyles within your app matching those defined in your .plist:
extension UIFontTextStyle { static let heading = UIFontTextStyle(rawValue: "heading") }
Where you would usually set the text on a UILabel e.g.
swift self.titleLabel.text = "My label text"
Use TypographyKit's UIKit additions:
swift self.titleLabel.text("My label text", style: .heading)
Or where your text has been set through IB simply set the UIFontTextStyle programmatically:
swift self.titleLabel.fontTextStyle = .heading
If you are happy to use strings, an alternative means of setting the
fontTextStyleproperty is to set the key path
fontTextStyleNameon your UIKit element to the string value representing your fontTextStyle - in the example above, this would be 'heading'.
Using this method it is possible to support Dynamic Type in your application with zero code.
Your UILabel and UIButton elements will automatically respond to changes in the Dynamic Type setting on iOS on setting a UIFontTextStyle with no further work needed.
Typography styles you define in TypographyKit.plist can optionally include a text color and a letter case.
ui-font-text-styles heading font-name Avenir-Medium point-size 36 text-color #2C0E8C letter-case upper
From version 1.1.3 onwards it is possible to use an existing typography style to create a new one. For example, imagine you would like to create a new style based on an existing one but changing the text color. We can use the
extendskeyword to extend a style that exists already and then specify which properties of the that style to override e.g. the
text-colorproperty.
We can create a new typography style called
interactive-textbased on a style we have defined already called
paragraphas follows:
PLIST
paragraph font-name Avenir-Medium point-size 16 text-color text letter-case regular interactive-text extends paragraph text-color purple
JSON
"paragraph": { "font-name": "Avenir-Medium", "point-size": 16, "text-color": "text", "letter-case": "regular" }, "interactive-text": { "extends": "paragraph", "text-color": "purple" }
Android has from the start provided developers with the means to define a color palette for an app in the form of the colors.xml file. Colors.xml also allows developers to define colors by their hex values. TypographyKit allows developers to define a color palette for an app by creating an entry in the TypographyKit.plist.
typography-colors blueGem #2C0E8C
Colors can be defined using hex values, RGB values or simple colors by using their names e.g. 'blue'.
typography-colors blueGem rgb(44, 14, 140)
Create a UIColor extension to use the newly-defined colors throughout your app:
extension UIColor { static let blueGem: UIColor = TypographyKit.colors["blueGem"]! }
Or:
extension UIColor { static let fallback: UIColor = .black static let blueGem: UIColor = TypographyKit.colors["blueGem"] ?? fallback }
Your named colors can be used when defining your typography styles in TypographyKit.plist.
ui-font-text-styles heading font-name Avenir-Medium point-size 36 text-color blueGem
It is also possible override the text color of a typography style on a case-by-case basis:
myLabel.text("hello world", style: .heading, textColor: .blue)
TypographyKit also supports definition of colors via asset catalogs available from iOS 11 onwards. Simply include the name of the color as part of your style in the configuration file and if the color is found in your asset catalog it will automatically be applied.
Useful String additions are provided to easily convert letter case.
let pangram = "The quick brown fox jumps over the lazy dog" let upperCamelCased = pangram.letterCase(.upperCamel) print(upperCamelCased) // prints TheQuickBrownFoxJumpsOverTheLazyDog
With numerous convenience functions:
let upperCamelCased = pangram.upperCamelCased() // prints TheQuickBrownFoxJumpsOverTheLazyDoglet kebabCased = pangram.kebabCased() // prints the-quick-brown-fox-jumps-over-the-lazy-dog
Typography styles can be assigned a default letter casing.
ui-font-text-styles heading font-name Avenir-Medium point-size 36 letter-case upper
However occasionally, you may need to override the default letter casing of a typography style:
myLabel.text("hello world", style: .heading, letterCase: .capitalized)
By default, your font point size will increase by 2 points for each notch on the Larger Text slider in the iOS accessibility settings however you may optionally specify how your UIKit elements react to changes in UIContentSizeCategory.
You may specify your own point step size and multiplier by inclusion of a dictionary with key
typography-kitas part of your
TypographyKit.plistfile.
typography-kit minimum-point-size 10 maximum-point-size 100 point-step-size 2 point-step-multiplier 1
Optionally, you may clamp the font point size to a lower and / or upper bound using the
minimum-point-sizeand
maximum-point-sizeproperties.
TypographyKit also allows you to host your configuration remotely so that your colors and font styles can be updated dynamically. To do so, simply add the following line to your app delegate so that it is invoked when your app finishes launching:
TypographyKit.configurationURL = URL(string: "https://github.com/rwbutler/TypographyKit/blob/master/Example/TypographyKit/TypographyKit.plist")
Your typography styles and colors will be updated the next time your app is launched. However, should you need your styles to be updated sooner you may call
TypographyKit.refresh().
TypographyKit is available under the MIT license. See the LICENSE file for more info.
|AnimatedGradientView |
|:-------------------------:|
|
|Cheats |Connectivity | FeatureFlags | Skylark | TypographyKit | Updates |
|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|
| |
|
|
|
|
cddfrom the Terminal.
|Config Validator | IPA Uploader | Palette|
|:-------------------------:|:-------------------------:|:-------------------------:|
| |
|