Coder Social home page Coder Social logo

Font sizes spreadsheet about swash HOT 4 CLOSED

mindgrub avatar mindgrub commented on June 10, 2024
Font sizes spreadsheet

from swash.

Comments (4)

SamHFrancis avatar SamHFrancis commented on June 10, 2024

Hi Chris, I don't think these size ramps are documented anywhere. I got them by running an app with the Accessibility Inspector and changing the text size settings. You can override traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) like the sample app does and print the values as you change the setting. Something like this, maybe with better formatting:

let defaultSizes: [UIFont.TextStyle: CGFloat] =
[.caption2: 11,
 .caption1: 12,
 .footnote: 13,
 .subheadline: 15,
 .callout: 16,
 .body: 17,
 .headline: 17,
 .title3: 20,
 .title2: 22,
 .title1: 28,
 .largeTitle: 34]

for (textStyle, defaultSize) in defaultSizes {
    let size = UIFontMetrics(forTextStyle: textStyle)
        .scaledValue(for: defaultSize)

    print(traitCollection.preferredContentSizeCategory, textStyle, size)
}

I made a spreadsheet for two text styles just for the blog post, but I don't have it on me right now. Also bear in mind that these values are subject to change with new versions of iOS.

from swash.

SamHFrancis avatar SamHFrancis commented on June 10, 2024

Okay, I had some time so I made a table. I found that .scaledValue(for:) may return a decimal, while .scaledFont(for:) returns a font which always has a whole number for pointSize. Here are the values I got for iOS using the default sizes from the HIG. These would be different for watchOS and tvOS.

Caption2 Caption1 Footnote Subheadline Callout Body Headline Title3 Title2 Title1 Large Title
XS 11 10 12 12 14 15 15 18 19 26 32
S 11 10 12 14 14 15 15 18 20 26 32
M 11 10 12 14 15 16 16 19 20 27 33
L (Default) 11 12 13 15 16 17 17 20 22 28 34
XL 15 14 14 17 18 19 19 22 24 30 36
XXL 17 16 16 18 19 20 20 24 25 31 38
XXXL 19 17 17 20 21 22 22 26 27 34 40
AccessibilityM 21 20 21 23 24 26 26 30 32 38 43
AccessibilityL 25 24 24 27 30 31 31 35 37 42 47
AccessibilityXL 30 29 29 32 35 37 37 41 41 47 51
AccessibilityXXL 35 33 33 38 40 43 39 46 46 50 55
AccessibilityXXXL 41 38 38 44 46 48 48 52 52 56 58

from swash.

AccuPhoenix01 avatar AccuPhoenix01 commented on June 10, 2024

Thanks Sam, I hadn't seen you made this. I pulled the values from Apple's website and made this:
iOSAccessibilityFontSizing.pdf

from swash.

SamHFrancis avatar SamHFrancis commented on June 10, 2024

Oh, cool! That's a nice reference, thanks. It looks like the system font values in the HIG differ slightly from those produced by UIFontMetrics, so that's good to be aware of.

from swash.

Related Issues (4)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.