semantic typography Responsive 가이드 문서 (font size, line height) 부분 질문

Question

쌤 안녕하세요. semantic typography 등록 후 가이드 문서 제작 중인 상황입니다.   공유해주신 🔹 파운데이션 스타일 가이드 + 컴포넌트 워크시트 통합본 https://www.figma.com/community/file/1469798941319486391/bp-design-kits-single-version-v1 을 참고해서 가이드 문서를 제작하다가 semantic typography 등록 및 스타일 가이드 문서에서 같은 24, 20 폰트 사이즈의 line height가 데스크탑, 모바일에서 다른 숫자로 적용된 이유가 궁금합니다.     desktop: 24px/28, 20px/24 mobile: 24px/32, 20px/28   어떤 규칙이 적용된 것인지 궁금합니다! 같은 font size에서 line height가 다른 숫자로 적용되어 배리어블 등록 및 가이드 문서 제작 시, 이 부분이 헷갈려서 질문드렸습니다!   헷갈릴 경우에는 데스크탑, 모바일 모두 같은 폰트 사이즈에 같은 line height를 적용해도 될지 궁금합니다!!   실무에 유익한 강의와 좋은 자료 공유해주셔서 항상 감사합니다!

볼드 UX · Answer

안녕하세요, 이 경우에는 아마 제가 폰트 사이즈를 16px의 경우 25를 곱해 400으로 바꾼 다음에 이것을 기준으로 만들면서 나온 것 같습니다.   예를 들어, xl은 폰트사이즈가 600이면 라인하이트는 여기서 200을 더한 800 이런식으로 하다보니 Heading 작은 md, sm에서는 150, 100 크기가 커지면서 만들어진 것 같습니다.   이런식으로 접근하셔도 되고, 아니면 말씀하신대로 동일한 line height로 하셔도 무방합니다. 예를 들어, Heading은 110~120 사이에서 하나를 선택해서 모두 적용하고, Body는 140~160 사이에서 하나를 선택해 일괄적용하시면 될 것 같습니다.   궁금하신 점 있으시면 더 알려주세요.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. askare님. 질문해주신 &ldquo;semantic typography responsive 가이드 문서&rdquo;에 관한 내용은, 반응형 UI 디자인에서 매우 중요한 주제입니다. 같은 폰트 사이즈에서 데스크탑과 모바일의 line height가 다른 이유는 주로 읽기 가독성과 레이아웃 적응성 때문입니다. 가독성 : 모바일 화면은 상대적으로 작기 때문에, 더 많은 공백을 두어 가독성을 높이는 경우가 많습니다. 그래서 모바일에서 line height가 더 크게 적용될 수 있습니다. 이로 인해 텍스트 사이가 더 넓어지고, 읽기 편해지는 효과가 있습니다. 레이아웃 적응성 : 데스크탑과 모바일은 기본적으로 화면 크기와 비율이 다르므로, 이 차이를 고려하여 line height를 조정합니다. 작은 화면에서는 더 세밀한 조정이 필요할 수 있습니다. 디자인 일관성 : 앞서 말씀드린 이유들로 인해, 반응형 디자인에서는 각각의 디바이스 특성에 맞춘 일관성을 유지하기 위해 이러한 차이가 발생합니다. 따라서, 이러한 디자인 원칙을 참고하여 line height를 조정하시는 것이 일반적입니다. 헷갈리실 경우, 팀이나 프로젝트의 스타일 가이드에 맞게 설정하시면 되며, 스타일 가이드를 통한 일관된 사용자 경험이 중요하므로 가이드를 따르는 것이 좋습니다. 아래에서는 관련된 설명과 사례를 참고할 수 있는 기존 답변 링크를 제공해 드립니다: Material Design의 반응형 타이포그래피 가이드 : 이 가이드에서는 다양한 디바이스 및 상황에 맞춘 타이포그래피 설계에 대해 자세히 설명합니다. 여러분이 하시는 작업에 도움이 될 수 있습니다. 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.