UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

What font / color is used for section headers?

Forums > SwiftUI

Hello,

Does any one know exctly what font is used by default in Section headers?

                Section(header: Text("AN AMAZING SECTION HEADER")) {

It looks like

.font(.system(size: 15, weight: .regular, design: .rounded))

but that seems not exactly the same font.

Thank you!

1      

Hi, It looks a lot like

.font(.subheadline.smallCaps())
.foregroundColor(.secondary)

if not the same, i checked in apple design resources and it says SF Pro, Regular, 13pt.

1      

Hi @flaneur7508! Off topic, noticed while helping you earlier that you often used font modifier .font(.system(size: 15, weight: .regular, design: .rounded))

Wouldn't be it much easier for you to create custom modifer and pass, say, size only. Saves a least some keystrokes while coding :). Well, if there is no good reason to do otherwise of course..

struct AppText: ViewModifier {
    var size: CGFloat

    func body(content: Content) -> some View {
        content
            .font(.system(size: size, weight: .regular, design: .rounded))
    }
}

extension View {
    func appText(_ size: CGFloat) -> some View {
        modifier(AppText(size: size))
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
            Text("Hello, world!")
                .appText(25) // <- You will just type this instead that long code you used.
        }
        .padding()
    }
}

1      

Not sure if you're still looking, but incase you are (or like me, are someone else looking).

I was able to replecate it without loosing the ability to resize with the system


Text("Some Section Header Text")
  .font(.body.smallCaps())
  .fontWeight(.light)
  .foregroundStyle(.secondary)

1      

The font and color used for section headers can vary depending on the specific design and style choices made by the creator of a document, website, or application. There is no universal standard for section header styles, as different designers and developers use various fonts and colors to achieve a specific look or brand identity.

If you're referring to a specific platform, website, or application, you may want to inspect the design elements directly or refer to any style guides or documentation provided by the platform. Common fonts for headers might include Arial, Helvetica, or other sans-serif fonts, while colors can vary widely based on the overall color scheme of the design. If you have a specific context in mind, providing more details could help in offering more accurate information. If you're asking about a particular website or application, you might consider checking their style guides or documentation for design specifications.

1      

The default font used in section headers in SwiftUI can vary depending on the platform and device. However, if you're looking to match the default system font closely, you can try using the .system modifier without specifying the design parameter:

Section(header: Text("AN AMAZING SECTION HEADER").font(.system(size: 15, weight: .regular))) { // Your section content here }

By omitting the design: .rounded parameter, you're allowing SwiftUI to use the default system font, which should provide a closer match to what you're seeing elsewhere in the app.

1      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.