Typography

RSS for tag

Implement good typography technique, make the most of the advanced features in Apple system fonts, and integrate custom fonts.

Posts under Typography tag

25 Posts
Sort by:

Post

Replies

Boosts

Views

Activity

Issues Supporting All Accessibility Features with a Custom Font
I am in the process of adding my company's brand font to our SwiftUI app. I am able to implement the font using the provided public APIs so that text styles / dynamic type and the font weight modifier in SwiftUI work correctly. However we are unable to implement custom font in such a way that text styles / dynamic type, the font weight modifier, and the bold text accessibility setting all work at the same time. Am I missing an implementation detail so that all these features work correctly? Font Setup The font files were modified to better support SwiftUI: The font style name metadata was modified to match the name the .fontWeight(...) modifier expects. This was done with Typelight. The font weight value (100/200/300) was modified so that the underlying weight value matches the value the .fontWeight(...) modifier expects. See "Using custom fonts with SwiftUI" by Matthew Flint. The font files were imported via the Info.plist. Examples Font Weight Comparison San Fransisco: Text("#100") .font(.largeTitle) .fontWeight(.ultraLight) Overpass by Name: Text("#100") .font(.custom("Overpass-UltraLight", size: 34, relativeTo: .largeTitle)) Overpass by Weight: Text("#100") .fontWeight(.ultraLight) .font(.custom("Overpass", size: 34, relativeTo: .largeTitle)) Legibility Weight Test When using the .fontWeight(...) modifier, the custom font does not change weights when the bold text accessibility setting is enabled. Dynamic type size works as expected. Normal legibility weight: Bold legibility weight: Dynamic Type Size: Use UIFont Using UIFont to load the custom font files and initializing a Font with the UIFont breaks dynamic type: Bold type also does not work: Custom Modifier Creating a custom modifier allows us to support dynamic type and manually handle bold text. However it creates a conflicting API to SwiftUI's .fontWeight(...) modifier. struct FontModifier: ViewModifier { enum UseCase { case paragraph case headline } enum Weight { case light case regular case heavy } @Environment(\.legibilityWeight) var legibilityWeight var useCase: UseCase var weight: Weight init(_ useCase: UseCase, _ weight: Weight) { self.useCase = useCase self.weight = weight } var resolvedHeadlineWeight: String { let resolvedLegibilityWeight = legibilityWeight ?? .regular switch weight { case .light: switch resolvedLegibilityWeight { case .regular: return "Light" case .bold: return "Semibold" @unknown default: return "Light" } case .regular: switch resolvedLegibilityWeight { case .regular: return "Regular" case .bold: return "Bold" @unknown default: return "Regular" } case .heavy: switch resolvedLegibilityWeight { case .regular: return "Heavy" case .bold: return "Black" @unknown default: return "Heavy" } } } var resolvedParagraphWeight: Font.Weight { switch weight { case .light: return .light case .regular: return .regular case .heavy: return .heavy } } var resolvedFont: Font { switch useCase { case .paragraph: return .system(.largeTitle).weight(resolvedParagraphWeight) case .headline: return .custom("Overpass-\(resolvedHeadlineWeight)", size: 34, relativeTo: .largeTitle) } } func body(content: Content) -> some View { content .font(resolvedFont) } } GridRow { Text("Aa") .modifier(FontModifier(.paragraph, .regular)) Text("Aa") .modifier(FontModifier(.paragraph, .heavy)) Text("Aa") .modifier(FontModifier(.headline, .regular)) Text("Aa") .modifier(FontModifier(.headline, .heavy)) } Font Environment Value The font environment value does not contain font weight information when the fontWeight(...) modifier is used.: struct DumpFontTest: View { @Environment(\.font) var font var body: some View { Text("San Fransisco") .onAppear { print("------------") dump(font) } } }
2
1
201
5d
Using SF Pro for a shop website.
Hello! I am looking to use SF Pro as the main font of my website. This website is used as a place of purchase for some of my products, none of which will actually be using this font. The websites logo will also not be using this font, however I am worried that may be legally unviable. Please let me know if this is an option. I'm not looking to get direct financial gain by using your fonts, just would like to use it for the website. Thank you for your help.
0
0
209
Jun ’24
How to attribute/credit Apple Fonts added to app?
My app lets users create things with text, and I've included Apple fonts so users can format their text with them. These were fonts I found in the Font Book app that comes with macOS. My assumption is that these, like the San Francisco font, can be distributed with apps. Do I need to attribute these fonts to their creators and publish a license in my "About" page? If so, where do I find the license(s) and what is the proper way of publishing them? Is there anything else I should know? Please let me know if this should've been posted under a different topic and tag
2
0
289
1w
Extra large SF glyphs
There are some Apple widgets (like the Weather Stand-by widget) that use some extra large versions of numbers. In those cases, they appear to be using some modified version of the number glyphs that is much more pleasing to look at. The default corners are very sharp, but rounded makes the letters overall bubbly. With this mystery difference, the overall letters are scare but the corners have a radius. I have been completely unable to replicate this.. Can anyone please point me to how these alternate symbols can be used? It is driving me crazy that this exists but I can't access them.
1
1
203
Jun ’24
Custom Fonts were displayed as Helvetica and cannot be used from iOS 17
The app downloads assets consisting of custom fonts using tags from On-Demand Resources, registers them in the system font, and provides them to other apps such as Freeform through UIFontPickerViewController. Custom Fonts that were applied well until iOS 16 appear as Helvetica starting from iOS 17 and cannot be used. As the font list appears in the device's Settings > General > Font, the font downloaded from On-Demand Resources is registered in the system font. It has been confirmed to occur particularly frequently starting from iPhone 15 and iOS 17 and above. The app requests download from On-Demand Resources with NSBundleResourceRequest along with tags, receives assets in response with conditionally beginAccessingResources and beginAccessingResources, and then registers them in the system using CTFontManagerRegisterFontURLs.
0
0
300
May ’24
How come I get "Cannot convert value of type 'Font.TextStyle' to expected argument type 'Font?'" when trying to apply a TextStyle from a Binding with `.font()`?
I'm building a settings page and simply want an active preview display embedded into a larger Font Settings View that has: editable text (so TextField) rendering of corresponding Apple provided TextStyle (so ask to keep with DynamicType guidelines) struct PairingDisplayView: View { @Binding var displayStyle: Font.TextStyle @State var displaySample = "This is a title" @State var bodySample = "Here's some body text to elaborate the font paring preview" var body: some View { VStack(alignment: .leading) { Group { TextField( "display", text: $displaySample ) .font(displayStyle) TextField( "body", text: $bodySample ) .font(.body) } .padding() } .overlay( RoundedRectangle(cornerSize: CGSize(width: 20, height: 20)) .strokeBorder() .foregroundColor(.cyan) ) .padding() } } I have a @State var selectedSystemStyle: Font.TextStyle = .caption2 that later feeds the said Binding... but I can't get over how confusing it is to me that a Font.TextStyle is not acceptable for the .font() modifier considering it's a Font and I appropriately call .font(displayStyle) Am I missing something fundamental here?
2
0
424
Mar ’24
System fonts file access: allowed for sandboxed apps?
Hello! I am developing an ebook reader iOS app that uses c/c++ codec as a page renderer. The codec uses TrueType as a font rendering engine that requires access to .ttf (or .ttc) files. Currently, I supply TrueType with fonts embedded in the app package, so they lay within the app sandbox. The codec supports the whole unicode plane and many languages that ebooks may use, but the fonts I supply don't have some of the important glyphs (i.e. katakana or hangul). I see that iOS has its own font storage, located in /System/Library/Fonts/ directory. The codec is able to parse this directory and read .ttf files located inside, using these fonts as a fallback in the case when the supplied fonts can't draw certain glyphs. I use opendir and fopen(in "rb" mode) as a way to read the data, and it works well. Does this type of access to the system directory violate the sandbox rule for an app distribution, and, if yes, is there a way to get access to stored .ttf files not violating the mentioned rule?
0
0
429
Jan ’24
Can't get custom fonts to work
Hey I'm struggling to get to use Custom fonts to work In Xcode 15, I have installed 3 fonts that I downloaded from googlefonts.. I'm new to Xcode and can't seem to get the coding right or may have done something wrong when installing them however, it isn't throwing an error code, it's just not showing the typeface. font(.custom("IslandMoments-Regular2", size: 60, relativeTo: .title)) (This is the code I have been using) Thanks, Caitlin
0
0
447
Nov ’23
iOS/Safari 17 does not support COLR/CPAL (v0) format color font
I take these websites to test COLR/CPAL(v0) format color font: https://yoksel.github.io/color-fonts-demo/ https://pixelambacht.nl/chromacheck/ In my iOS 17 device, both websites show unsupported of COLR/CPAL (v0) color font, however, on my other iOS 16 devices, it is supported. COLR/CPAL (v0) color font format is widely supported on mainstream browsers currently, from Blink (Chrome) to WebKit (Safari desktop), why does iOS deprecate it?
1
0
594
Oct ’23
Font custom in my App
Hi guys, I have imported font (I have added in info.plist) and I use this code to import in all of project: struct swim_targetApp: App { var body: some Scene { WindowGroup { ContentView() .environment(\.font, Font.custom("SFCompactRounded-Regular", size: 16)) .environment(\.font, Font.custom("SFCompactRounded-Ultralight", size: 16)) .environment(\.font, Font.custom("SFCompactRounded-Thin", size: 16)) .environment(\.font, Font.custom("SFCompactRounded-Light", size: 16)) .environment(\.font, Font.custom("SFCompactRounded-Medium", size: 16)) .environment(\.font, Font.custom("SFCompactRounded-Semibold", size: 16)) .environment(\.font, Font.custom("SFCompactRounded-Bold", size: 16)) .environment(\.font, Font.custom("SFCompactRounded-Heavy", size: 16)) .environment(\.font, Font.custom("SFCompactRounded-Black", size: 16)) } } } But .title, .title3, navigationBarTitle don't use my custom font (ex 1, 2 in screenshot), but in another parts working fine (ex 3 in screenshot). Can you help me? Thank you ;)
0
0
503
Oct ’23
Punctuation missing from system font when Chinese language is selected
Dear experts, I get glyphs from the system font using CTFontGetGlyphsForCharacters, something like this: UIFont* uifont = [UIFont monospacedDigitSystemFontOfSize: s weight: w]; CTFontRef font = (__bridge CTFontRef)uifont; CTFontGetGlyphsForCharacters(font, ....); The characters that I ask for are basically latin-1 plus a few others. The app is not localised for Chinese. When I change the phone's default language to Chinese, this code gets glyphs for most characters OK but it fails for a few punctuation symbols: 91 = [ 93 = ] 183 = middle dot 8220 = left double curly quote 8221 = right double curly quote Can anyone guess what's going on here? What's special about those characters? Thanks, Phil.
0
0
576
Sep ’23