웹디자인 시 폰트의 크기, 행간, 자간, 두께 등 정리글

·2024년 1월 15일
0

제가항상 어려워하는 부분입니다.
폰트 크기, 여백 등 인데요,

유튜브, 구글링해서 모아온 정보와
제가 알고있는 부분을 합쳐서 글을 써보겠습니다.


두께는 얼마나?

두께는 최대 2가지까지만 사용하도록 합니다.
미디엄, 볼드 2가지!

프리텐타드와 같이 thin부터 black까지 여러개의 두께를 보유한 폰트에서는
미디엄과 볼드의 차이가 크게 없을 수 있습니다.
그럴 땐 어느정도 차이가 나는 두께로 골라 사용하면 됩니다.

(근데 전 두꺼운 폰트를 안좋아해서.. 라이트&세미볼드를 선호하는데요, 이렇게 사용하니 디자인이 전체적으로 허여멀건 희끄무리~ 약해보이는 것 같아요. 개선해야 할 점입니다.)


행간 line-height

  • 글줄과 글줄 사이의 간격을 행간이라고 합니다.
  • 행간은 어간(단어 사이의 띄어쓰기)보다 넓어야합니다.
  • 행간 사이에 글자가 하나 더 들어간다거나, 글자 반이 들어가면 됩니다.

특히나 모바일에서는 행간을 넓혀줘야 가독성이 좋습니다! 화면이 작기 때문.

  1. 이런 글이 있습니다.
  1. 띄어쓰기보다 행간의 간격이 좁습니다. 이렇게 되면 생기는 문제는
  1. 글이 이런 방향으로 의도치 않게 읽히게 됩니다. 가독성이 떨어지게 되지요.
  1. 이렇게 행간에 글자 만큼의 간격을 설정해주면

    의도한 방향으로 한 줄 한 줄, 잘 읽히게 됩니다.

자간 letter-spacing

  • 글자와 글자 사이의 간격입니다.
  • 되도록이면 자간은 줄이지 않고 행간을 늘리는 것이 좋습니다.
    (굵기 문제나 영문과의 혼용시 밸런스가 깨진다던지, 글자 크기를 줄였을 경우 가독성이 떨어짐.)
  • 한글은 자간을 조금 줄여도 됩니다.(그룹핑 되어보이게)
  1. 행간이 좁으면 글이 한 줄 한 줄, 읽히기가 어렵지요?
  1. 특수한 상황으로 행간을 늘리기가 어렵다면, 자간을 좁혀서라도
    가독성을 높여줍니다.(추천하진 않음)

    예시를 위해 극단적으로 줄여놓긴 했습니다. 위에 글보다는 차례대로 읽히는 것 같...(나요?)

추가로 단어와 단어 사이의 간격은 "어간"이라고 합니다.(띄어쓰기) word-spacing인데, 이 부분에 대해선 딱히 조정할 만한 게 없는 것 같습니다.


지금까지 저는 행간을 좁게 만들어야 잘 읽힌다는 이상한 전설을 믿고..
행간을 찹찹 줄여버렸습니다 ㅜㅜ....

이제 다신 그런 일이 없을겁니다!!

폰트 hex 컬러가 8번대로 넘어가면 접근성이 떨어짐. 진해보여도 7번대가 최대
예) #808080 #707070 (물론 흰 바탕에서)

profile
저녁놀 마을 사람

0개의 댓글

관련 채용 정보