[UIKit] Line Height(행간), Line Spacing(자간) 조절하기

기본인 System font에 대하여 옵션으로 font의 Size와 Weight에 대해 다룰 수 있습니다. 또는 Custom Font를 이용한다면 Custom Font의 주어진 이름과 Size 옵션을 조절할 수 있습니다.

 

디자이너와 협업을 하는 과정에서 처음으로 행간과 자간에 대해 다루는 과정을 마주했습니다.

font size와 개별로 행간을 조절해야 할 때는 어떻게 해야할까요?

 

Line Height행간과 Line Spacing(자간)에 대해 어떻게 조절할 수 있을까 고민해보았습니다.

 

 

 

우선 Font Size와 LineHeight에 대해 인지하기 위해 직접 값을 출력해보면서 확인해봅니다.

 

아하! 폰트 사이즈와 별개로 Line Height에 대한 값이 존재합니다. 

 

이외에도 font에 대한 더 다양한 속성들을  찾아볼 수 있습니다.

 

그럼 capHeight, Ascender, xHeight, line Height는 정확히 무엇을 의미하는걸까요?

 

apple document - "Getting Font Metrics" 에 따르면 Line heigth를 어떻게 규정하고 있는지 알 수 있습니다.

(Line hegiht = Ascent + Descent + Line gap)

 

각각의 속성 값에 영향을 주는 요소들을 확인 할 수 있습니다.

 

 

NSAttributedString은 텍스트의 스타일과 속성을 지정하는 데 사용되는 클래스입니다. 다양한 텍스트 표시와 편집 기능을 제공합니다. NSAttributedString을 사용하면 텍스트의 서식, 색상, 글꼴, 밑줄, 줄 간격 등 여러 가지 속성을 추가할 수 있습니다.

속성이 있는 문자열의 내용을 나중에 수정해야 하는 경우에는 NSAttributedString 대신 NSMutableAttributedString 타입을 사용합니다. NSAttributedString은 변경할 수 없는 문자열을 나타내며, 변경 가능한 버전은 NSMutableAttributedString입니다.

 

눈금자 속성을 캡슐화하기 위해 NSParagraphStyle의 서브 클래스인  NSMutableParagraphStyle을 사용합니다.

Line Height 수정을 위해서는 눈금자 속성을 수정해야하니 이 부분을 수정합니다.

 

NSMutableParagraphStyle은 텍스트의 단락 스타일 속성을 변경시킬 수 있는 클래스를 제공합니다. 텍스트의 레이아웃 및 다양한 속성을 설정할 수 있도록 하여, 텍스트를 더 세밀하게 제어할 수 있습니다.

 

• alignment: 단락의 텍스트 정렬 방식인 좌측 정렬, 우측 정렬, 가운데 정렬 등을 설정
• firstLineHeadIndent: 단락의 첫 번째 줄의 시작 위치를 설정
• headIndent: 단락의 모든 줄의 시작 위치를 설정
• tailIndent: 단락의 모든 줄의 끝 위치를 설정
• lineHeightMultiple: 기본 라인 높이에 곱할 배수를 설정
• lineSpacing: 각 라인 사이의 간격을 설정
• maximumLineHeight: 라인의 최대 높이를 설정
• minimumLineHeight: 라인의 최소 높이를 설정
• paragraphSpacing: 단락과 단락 사이의 간격을 설정
• paragraphSpacingBefore: 단락 전에 추가되는 간격을 설정

 

 

적용하기

 

 

 

 

 

[참고]

https://developer.apple.com/documentation/appkit/nsfont/advanced_font_metrics

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/FontHandling/Tasks/GettingFontMetrics.html

https://sujinnaljin.medium.com/swift-label%EC%9D%98-line-height-%EC%84%A4%EC%A0%95-%EB%B0%8F-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC-962f7c6e7512

https://sujinnaljin.medium.com/swift-label%EC%9D%98-line-height-%EC%84%A4%EC%A0%95-%EB%B0%8F-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC-962f7c6e7512