Adobe XD에서 텍스트 속성을 조정하는 방법

Adobe XD 프로젝트에 텍스트가 있으면 텍스트 속성 변경을 시작할 수 있습니다. 이러한 속성에는 글꼴 모음, 글꼴 크기, 글꼴 두께, 정렬, 문자 간격(커닝 및 자간), 줄 간격(행간), 채우기, 테두리(획), 그림자(그림자) 및 배경 흐림이 포함됩니다. 그러면 이러한 속성이 어떻게 적용되는지 검토해 보겠습니다.

가독성 및 글꼴 선택 정보

글꼴 선택은 매우 중요합니다. 시스템에 많은 글꼴 선택이 있을 수 있지만 선택된 소수만이 화면 읽기를 위한 성공적인 선택으로 잘릴 것입니다. 글꼴 선택에서 찾아야 할 몇 가지 특성은 다음과 같습니다.

• 세리프체 또는 비세리프체? 아래에서 상단에는 세리프 스타일의 글꼴 패밀리가 있고 하단에는 산세리프 글꼴 패밀리가 있습니다. 세리프체에는 글자 한 획을 마무리하는 약간의 돌출부가 있습니다. 반면에 산세리프체에는 약간의 투영이 없습니다. 산세리프체는 보다 현대적으로 보이는 경향이 있으며 대화형 응용 프로그램 및 웹 사이트에 널리 사용됩니다. 과거에는 셰리프가 있는 글꼴 모음이 텍스트의 양이 많을 때 읽기가 더 쉽다고 믿었습니다. 시선 추적 장치로 수행한 테스트는 serif 또는 sans-serif 간에 가독성에 큰 차이가 없음이 입증되었으므로 다음에 나오는 다른 글꼴 특성에 주의를 기울이는 한 자유롭게 두 스타일을 선택하십시오.

  상단은 세리프체, 하단은 산세리프체.

• 직선 너비, 균일한 선 너비: 문자가 픽셀로 만들어지기 때문에 텍스트 너비에 많은 변화를 주지 않는 것이 가장 좋습니다. 픽셀 미리보기에서 너비가 다양한 글꼴(상단)과 너비가 일관된 글꼴 사이의 차이를 볼 수 있습니다.

  상단 글꼴에는 글꼴을 만드는 굵은 선과 가는 선이 다양합니다. 하단 글꼴은 일관되고 화면에서 읽기 쉽습니다.

• 강력한 카운터: 카운터 는 "O", "B" 및 "R"과 같은 문자에서 볼 수 있는 구멍입니다. 카운터가 화면에 픽셀로 표시될 때 닫힐 경우 가독성 문제를 일으킬 수도 있으므로 이러한 카운터가 얼마나 큰지 주의하십시오. 두 개의 서로 다른 글꼴 패밀리의 픽셀 보기가 나타납니다. 카운터가 서로 어떻게 보이는지 확인하십시오.

  글꼴 모음 선택에서 강력한 개방형 카운터를 찾으십시오.

• 디센더 및 캡 높이: 짧은 디센더와 낮은 캡 높이는 화면의 가독성을 위해 중요합니다. 상단에 짧은 디센더와 낮은 캡 높이가 있는 글꼴 모음이 표시됩니다. 하단에는 긴 디센더와 높은 캡 높이가 있는 글꼴이 있습니다.

  디센더가 짧고 대문자 높이가 낮은 글꼴 모음은 일반적으로 화면에서 읽기 쉽습니다.

글꼴 모음 선택

가독성을 위해 더 나은 글꼴을 선택하는 방법을 알았으므로 이제 속성 패널을 사용하여 글꼴을 선택합니다. 선택 시 확인해야 할 사항은 다음과 같습니다.

• 글꼴 모음 : 화면에 일부 유형을 입력한 후 해당 유형을 선택하고 속성 패널의 텍스트 섹션에서 글꼴 모음 드롭다운 메뉴를 선택할 수 있습니다. 원하는 글꼴을 알고 있는 경우 글꼴 모음 텍스트 상자에 글꼴 이름을 입력하기 시작하면 시스템에 있는 경우 목록에서 찾을 수 있습니다.

  Adobe TypeKit을 통해 사용할 수 있는 글꼴이 있다는 것을 잊지 마십시오.

• 글꼴 두께: 글꼴 모음을 선택한 후 글꼴 두께 드롭다운 메뉴에서 두께를 선택할 수 있습니다. 시스템에 있는 글꼴에 따라 글꼴 두께를 다르게 선택할 수 있습니다.

  글꼴 모음과 글꼴 두께를 선택합니다.

• 글꼴 크기: 글꼴 크기 텍스트 상자에 글꼴 크기를 간단히 입력할 수 있지만 어떤 크기가 가장 적합한지 잘 모르는 경우 글꼴 크기 텍스트 상자 아래에 커서를 놓고 클릭하고 끌 수 있습니다. 드래그하기 전에 양방향 화살표를 찾으십시오. 위로 드래그하면 크기가 줄어듭니다. 아래로 크기가 커집니다.

  클릭하고 드래그하여 글꼴 크기를 시각적으로 변경합니다.

• 정렬: 속성 패널의 텍스트 섹션에 있는 정렬 버튼을 사용하여 선택한 텍스트를 왼쪽, 가운데 또는 오른쪽 정렬로 변경할 수 있습니다.
• 문자 간격: 문자 간격 은 문자 사이의 간격을 나타냅니다. 이를 추적 이라고 합니다. 여기에서 문자 사이의 간격을 늘린 결과를 볼 수 있습니다.

  일반 간격의 문자, 0(영)으로 설정한 다음 150으로 설정합니다.

글자 간격을 시각적으로 변경하기 위해 글꼴 크기 텍스트 상자에서 사용할 수 있는 것과 동일한 클릭 앤 드래그 기술을 사용할 수 있습니다.

클릭하고 드래그하여 문자 간격의 크기를 시각적으로 변경할 수도 있습니다.

• 행 높이 : 행 높이가 됩니다 선도 , 텍스트의 라인 사이의 공간. 이것은 정보 디자인에서 중요한 역할을 할 수 있으므로 디자인 전반에 걸쳐 일관되게 사용하고 있는지 확인하십시오. 줄 높이 텍스트 상자 아래에 커서를 놓고 클릭하고 위나 아래로 끌어 줄 높이를 줄이거나 늘릴 수도 있습니다.
• 색상: 속성 패널에서 채우기 색상 옆에 있는 상자를 클릭하여 채우기 색상을 변경합니다. 이 작업은 모든 셰이프와 동일한 방식으로 수행합니다. 채우기 상자를 선택하고 색상 선택기에서 색상을 선택합니다. 색상 선택기 오른쪽에 있는 투명도 슬라이드에서 텍스트의 투명도를 선택할 수도 있습니다.
• 테두리: 테두리를 적용하면 텍스트 주위에 획이 생깁니다. 가독성 문제가 발생할 수 있으므로 권장하지 않습니다. 드물게 특수 효과를 위해서만 사용하십시오. 아래 이미지는 더 어두운 배경에 얇은 획과 흰색 채우기가 있는 더 큰 서체의 예를 보여줍니다. 이와 같은 상황에서 테두리는 작동할 수 있지만 더 작은 텍스트에서는 작동하지 않습니다.

  어두운 배경에 흰색 채우기가 있는 작은 테두리.