SwiftUI, Font의 모든 것 (TextStyle, FontStyle, Font.Weight, Font.Design, System, Custom Font, 글자크기, 서식)

 

[참고] SwiftUI Font 공식문서

목차

1. System Fonts (size, weight, design)
    (1) Text View의 기본 서식 값
    (2) Font.weight 종류
    (3) Font.design 종류

2. Standard Fonts, Custom Fonts

    (1) Font.TextStyle 종류

    (2) Font 변경 방법

3. Font Style

   (+) 글자 간격에 대하여 - Kerning과 Tracking의 차이점

 

 

1. System Fonts (size, weight, design)

---

(1) Text View의 기본 서식 값 

Interface를 SwiftUI로 설정한 뒤, Xcode를 실행하면

"Hello, world!" 텍스트와 함께 Preview를 확인할 수 있다.

 

​

그렇다면 위 Text의 글자 크기는? 굵기는?

기본 설정이 어떻게 되어 있을까?

​

*Text에 대한 글자 폰트 서식은 font 수식어를 통해 변경할 수 있다.

*iOS 기본 폰트는 SF Pro이다.

 

 

오호, 같은 Text를 한 개 더 만들고

기본 글자크기를 17로 하니

두 Text가 같아진 것을 볼 수 있다.

​

public static func system(size: CGFloat, weight: Font.Weight = .regular, design: Font.Design = .default) -> Font

Text View에 적용된 system function을 들여다보자.

기본적으로 system(size:weight:design) function에는

weight = .regular, design = .default가 적용되어 있기 때문에

size외에 별도 param 값을 넣어주지 않아도 된다.

​

Text View의 기본으로 적용된 서식 값

•size = 17

•weight = .regular

•design = .default

​

이렇듯, SwiftUI의 Font 서식은 size(크기), weight(굵기), design(디자인) 3요소로

기본 서식을 구성한다는 것을 기억하면 Text View 그리기가 쉽다.

그럼 각각을 좀 더 알아보자.

​

​

 

반응형

(2) Font.weight 종류 

Font에서의 weight는 굵기를 얘기한다.

SwiftUI에서는 9가지의 weight를 제공하고 있고 굵기 차이는 아래와 같다.

뭔가 만들고 나니 뿌듯

ultraLight, thin, light, regular, medium, semibold, bold, heavy, black 순서대로

폰트가 굵어지는 것을 볼 수 있다.

​

직관적인 이름이지만 이상하게 종종 헷갈린다.

​

가령

medium과 regular 누가 더 굵은 것인가?

ultraLight와 thin 중 누가 더 얇은 것인가?

등등...

​

 

​

(3) Font.design 종류

Font design의 종류에는

default, monospaced, rounded, serif 가 있다.

뭔가 만들고나니 뿌듯2

Font Design은 한글에는 적용되지 않고, 영문에만 적용되며

역시 직관적인 이름들을 가지고 있다.

​

참고로,

rounded는 default의 서체의 모서리를 round 처리한 서식이다.

작게 볼 땐 몰랐는데, 서체가 커질수록 default와 rounded의 차이가 분명하게 보인다.

 

 

2. Standard Fonts, Custom Fonts

---

(1) Font.TextStyle 종류 

font에는 TextStyle이 있는데, size와 weight를 이용해 용도별로 Style 이름을 붙여준 것이라 생각하면 편하다.

약간의 노가다 였지만(?) 총 11가지 TextStyle의 size와 weight를 직접 맞춰봤다.

​

(글자 크기의 내림차순으로 정리해둠)

// The font style for large titles.
// Font.TextStyle = .largeTitle
.font(.largeTitle) = .font(.system(size: 34, weight: .regular))

// The font used for first level hierarchical headings.
// Font.TextStyle = .title
.font(.title) = .font(.system(size: 28, weight: .regular))

// The font used for second level hierarchical headings.
// Font.TextStyle = .title2
.font(.title2) = .font(.system(size: 22, weight: .regular))

// The font used for third level hierarchical headings.
// Font.TextStyle = .title3
.font(.title3) = .font(.system(size: 20, weight: .regular))

// The font used for headings.
// Font.TextStyle = .headline
.font(.headline) = .font(.system(size: 17, weight: .semibold))

// The font used for body text.
// Font.TextStyle = .body
.font(.body) = .font(.system(size: 17, weight: .regular))

// The font used for callouts. (*콜아웃 : 말풍선 같은 부연설명을 위해 사용되는 설명문)
// Font.TextStyle = .callout
.font(.callout) = .font(.system(size: 16, weight: .regular))

// The font used for subheadings.
// Font.TextStyle = .subheadline
.font(.subheadline) = .font(.system(size: 15, weight: .regular))

// The font used in footnotes. (*풋노트 = 각주)
// Font.TextStyle = .footnote
.font(.footnote) = .font(.system(size: 13, weight: .regular))

// The font used for standard captions. (*캡션 : 삽화, 사진 따위에 붙는 짧은 해설, 설명문)
// Font.TextStyle = .caption
.font(.caption) = .font(.system(size: 12, weight: .regular))

// The font used for alternate captions.
// Font.TextStyle = .caption2
.font(.caption2) = .font(.system(size: 11, weight: .regular))

 

뭔가 만들고나니 뿌듯3

물론 기획에 맞춰 디자인을 하다보면

TextStyle 보다는 직접 size, weight를 주는 경우가 더 많겠지만

​

이렇게 용도별로 만들어진 TextStyle을 사용하게 되면

size와 weight를 하나하나 맞춰줄 필요도 없고

일관된 스타일을 유지할 수 있어 장점이 많다.

​

또 Font.Design과 함께 사용해서 용도별 Style에 디자인을 줄 수 있다.

.font(.system(style: Font.TextStyle, design: Font.Design))

​

(2) Font 변경 

기본으로 적용된 'SF Pro' 시스템 폰트에서 벗어나 Custom Fonts를 사용하고 싶다면

아래 function을 이용하면 된다.

// .font(.custom("Futura", size: 30))
public static func custom(_ name: String, size: CGFloat) -> Font
// Create a custom font with the given `name` and `size` that scales relative to the given `textStyle`.
public static func custom(_ name: String, size: CGFloat, relativeTo textStyle: Font.TextStyle) -> Font
// Create a custom font with the given `name` and a fixed `size` that does not scale with Dynamic Type.
public static func custom(_ name: String, fixedSize: CGFloat) -> Font

 

name에 사용하고 싶은 Font를 적으면 되는데

적용가능한 Custom Font 항목들은 아래 공식문서에 리스트업 되어있다.

 

System Fonts - Fonts - Apple Developer

developer.apple.com/fonts/system-fonts/#document​

​

 

3. Font Style

---

Text View에 적용할 수 있는 Font Style관련 function엔 어떤 것들이 있을까나!

​

1. 글자 색 변경

// Sets the color of the text displayed by this view.
// Use this method to change the color of the text rendered by a text view.
// Text("Red").foregroundColor(.red)
public func foregroundColor(_ color: Color?) -> Text

 

2. 볼드 처리 (글자 굵게)

// Applies a bold font weight to the text.
public func bold() -> Text

 

3. 기울임 처리

// Applies italics to the text.
public func italic() -> Text

 

4. 취소선 처리

// Applies a strikethrough to the text. (Text with a line through its center.)
// - active: A Boolean value that indicates whether the text has a strikethrough applied.
// - color: The color of the strikethrough. If `color` is `nil`, the strikethrough uses the default foreground color.
public func strikethrough(_ active: Bool = true, color: Color? = nil) -> Text

 

5. 밑줄 처리

// Applies an underline to the text.
// - active: A Boolean value that indicates whether the text has an underline.
// - color: The color of the underline. If `color` is `nil`, the underline uses the default foreground color.
public func underline(_ active: Bool = true, color: Color? = nil) -> Text

 

6. 기준선 오프셋

// Sets the vertical offset for the text relative to its baseline.
public func baselineOffset(_ baselineOffset: CGFloat) -> Text

// 예시
HStack(alignment: .top) {
    Text("Hello")
        .baselineOffset(-10)
        .border(Color.red)
    Text("Hello")
        .border(Color.green)
    Text("Hello")
        .baselineOffset(10)
        .border(Color.blue)
}
.background(Color(white: 0.9))

 

7. 행간 조절 (텍스트 줄간격)

// Sets the amount of space between lines of text in this view.
public func lineSpacing(_ lineSpacing: CGFloat) -> some View

​

8. 글자간격 조절 - Kerning, 커닝 (글자의 모양에 따라, 폰트에 따라 글자 사이의 간격이 다르게 변화)

// Sets the spacing, or kerning, between characters.
// Text("ABCDEF").kerning(3)
public func kerning(_ kerning: CGFloat) -> Text

 

9. 글자간격 조절 - Tracking, 트래킹 (= 자간: 글자의 모양과 상관없이 고정된 값)

// Tracking adds space, measured in points, between the characters in the text view.
// A positive value increases the spacing between characters, while a negative value brings the characters closer together.
// Text("ABCDEF").tracking(-3)
public func tracking(_ tracking: CGFloat) -> Text

// Important!
//   If you add both the Text/tracking(_:) and Text/kerning(_:) modifiers to a view,
//   the view applies the tracking and ignores the kerning. (tracking이 kerning 보다 우선한다)

 

(+) Kerning과 Tracking의 차이점 

글자 간격을 조정하는 방법에는 Kerning과 Tracking이 있는데 간단히 비교를 하자면 아래와 같다.

struct ContentView: View {
    @State private var amount: CGFloat = 50

    var body: some View {
        VStack {
            Text("flutter")
                .font(.custom("Futura", size: 50))
                .kerning(amount)
            Text("flutter")
                .font(.custom("Futura", size: 50))
                .tracking(amount)

            Slider(value: $amount, in: 0...100) {
                Text("the amount of spacing")
            }
        }
    }
}

해당 코드에 대한 프리뷰. (상) Kerning (하) Tracking

 

•Kerning과 Tracking 모두 글자 간격에 대한 function이다.

•Kerning은 폰트 종류에 의존성을 가지며, 각 폰트가 가진 특성에 따라 글자 사이의 관계를 따져 글자 간격이 조절된다.

•Tracking의 경우 (흔히 '자간'이라고 부름) 폰트 종류와 관계 없이 각 글자 사의의 간격을 일정하게 넓힌다.

•SwiftUI에서는 1개의 Text View에 kerning과 tracking 수식어가 동시에 있다면 tracking을 우선하고, kerning을 무시한다.

•특정 폰트에서는 Kerning과 Tracking의 결과가 같을 수 있다.

​

---

얼핏 매우 기본적인 것 같아 보이지만

들여다보면 놓치기 쉬운 개념들이 꽤 있어서

한번 정리해보았다.

​

SwiftUI 공부하시는 분들에게

도움이 될 수 있는 글이 되기를!

​

다 같이 즐코딩!