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:

• Features
• Roadmap
• What's New in TypographyKit 4.0.0?
• What's New in TypographyKit 3.0.0?
• Installation
  • Cocoapods
  • Carthage
• Example App
• Usage
  • Typography Styles
  • Extending Styles
  • Color Palettes
  • UIColor(named:)
  • Letter Casing
  • Dynamic Type Configuration
  • Remote Configuration
• Author
• License
• Additional Software
  • Controls
  • Frameworks
  • Tools

Features

• [x] Dynamic Type support for UILabel, UIButton, UITextField and UITextView as well as some support for NSAttributedString.
• [x] Dynamic Type support for SwiftUI.
• [x] Dynamic Type support for custom fonts prior to iOS 11 (iOS 8 onwards).
• [x] Optionally support Dynamic Type using zero code (by setting the

  fontTextStyleName

  key path String to the name of your typography style in IB).
• [x] Helps make your app visually consistent across all screen by allowing you to define all of your typography styles and app color scheme in a single location.
• [x] Host and update your font styles and color schemes remotely. [Details]
• [x] Use Palette to make the same colour scheme used programmatically available for use in Interface Builder. [Details]
• [x] Define letter case as part of typography styles with simple letter case conversion available.
• [x] Use either a PList or JSON to define your TypographyKit configuration.

What's new in TypographyKit 4.0.0?

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

UIFontTextStyle

Text

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.

What's new in TypographyKit 3.0.0?

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-name

System

System-Bold

It is now possible to use

UIFontMetrics

UIFont.TextStyle

scaling-mode

stepping

uifontmetrics

uifontmetrics-with-fallback

CHANGELOG.md

Installation

Cocoapods

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

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 iOS

TypographyKit.framework

For more information see here.

Example App

An example app exists in the Example directory to provide some pointers on getting started.

Usage

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

fontTextStyle

fontTextStyleName

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

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
        
    

Extending Styles

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

extends

text-color

We can create a new typography style called

interactive-text

paragraph

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"
}        

Color Palettes

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)

UIColor(named:)

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.

Letter Casing

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 TheQuickBrownFoxJumpsOverTheLazyDog

let 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)

Dynamic Type Configuration

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-kit

TypographyKit.plist

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-size

maximum-point-size

Remote Configuration

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()

Author

Ross Butler

License

TypographyKit is available under the MIT license. See the LICENSE file for more info.

Additional Software

Controls

• AnimatedGradientView - Powerful gradient animations made simple for iOS.

|AnimatedGradientView | |:-------------------------:| |

Frameworks

• Cheats - Retro cheat codes for modern iOS apps.
• Connectivity - Improves on Reachability for determining Internet connectivity in your iOS application.
• FeatureFlags - Allows developers to configure feature flags, run multiple A/B or MVT tests using a bundled / remotely-hosted JSON configuration file.
• FlexibleRowHeightGridLayout - A UICollectionView grid layout designed to support Dynamic Type by allowing the height of each row to size to fit content.
• Hash - Lightweight means of generating message digests and HMACs using popular hash functions including MD5, SHA-1, SHA-256.
• Skylark - Fully Swift BDD testing framework for writing Cucumber scenarios using Gherkin syntax.
• TailorSwift - A collection of useful Swift Core Library / Foundation framework extensions.
• TypographyKit - Consistent & accessible visual styling on iOS with Dynamic Type support.
• Updates - Automatically detects app updates and gently prompts users to update.

|Cheats |Connectivity | FeatureFlags | Skylark | TypographyKit | Updates | |:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:| | | | | | |

Tools

• Clear DerivedData - Utility to quickly clear your DerivedData directory simply by typing

  cdd

  from the Terminal.
• Config Validator - Config Validator validates & uploads your configuration files and cache clears your CDN as part of your CI process.
• IPA Uploader - Uploads your apps to TestFlight & App Store.
• Palette - Makes your TypographyKit color palette available in Xcode Interface Builder.

|Config Validator | IPA Uploader | Palette| |:-------------------------:|:-------------------------:|:-------------------------:| | | |