■  블로그 가독성을 높여주는 최적의 글꼴,크기,줄간격은 ?


블로그에 가독성을 높여주기 위해서 글꼴,크기, 줄간격을 바꾸려고 하다보면... 
대표적으로 많이 사용하는 맑은 고딕, 나눔 고딕, 기본글꼴인 굴림체외에도 많은 글꼴이 있고 크기와 줄간격이 조금만 바뀌어도 느낌이 많이 달라져 어떻게 설정을 해줄지 항상 많이 고민을 하게 됩니다. 그래서 가독성이 좋아보이는 이웃분들은 글꼴과 폰트 줄간격을 어떻게 설정해주는지와 글꼴, 줄간격의 변경방법에 대해서 간단히 포스팅 해봤습니다. 



■ 빛무리님 블로그 ( 굴림체 : 10pt / 줄간격 : 1.5 )


 빛무리님 포스팅 바로 보러가기 : http://qlcanfl.tistory.com/538



■ 초록누리님 블로그 ( 나눔고딕 : 10.5pt, 줄간격 : 1.5 ) 
초록누리님 포스팅 바로 보러가기 : http://lovetree0602.tistory.com/456



■ 티비의 세상구경 ( 맑은고딕 : 11pt, 줄간격 1.5 (__) 죄송ㅋ


블로그에 가독성을 높여주기 위해서 글꼴,크기, 줄간격을 바꾸려고 하다보면... 
대표적으로 많이 사용하는 맑은 고딕, 나눔 고딕, 기본글꼴인 굴림체외에도 많은 글꼴이 있고 크기와 줄간격이 조금만 바뀌어도 느낌이 많이 달라져 어떻게 설정을 해줄지 항상 많이 고민을 하게 됩니다. 그래서 가독성이 좋아보이는 이웃분들은 글꼴과 폰트 줄간격을 어떻게 설정해주는지에와 글꼴, 줄간격의 변경방법에 대해서 간단히 포스팅 해봤습니다. 



■ 버섯공주님 블로그 (준비중..)



버섯공주님 블로그: http://mushroomprincess.tistory.com/378




■ 줄간격 변경하는 방법

html/css편집에서 style.css부분 첫머리에서

- line-height:1.5 부분의 숫자를 수정해주면됩니다.
- 스킨에 따라서 body안에있는 font:12px/1.5부분을 수정해주시면됩니다.






■ 글꼴 변경하는 방법

- 웹폰트를 적용하지 않는 방법

html/css편집에서 style.css에서 원하는 폰트를 아래그림처럼 제일앞쪽에 추가시켜 줍니다.
폰트가 없을 경우 뒤에 폰트가 적용이 됩니다. ( 맑은 고딕 -> Dotum순 )

Dotum,AppleGothic, sans-serlf; -> 맑은 고딕, Dotum,AppleGothic, sans-serlf;



 - 웹폰트(eot)로 적용하는 방법

정리가 자세히 되어있는곳이 있어 링크로 대신합니다. [웹폰트 적용시키는법 바로가기]



■ 후기


위에 나와있는 글꼴(폰트), 크기, 줄간격이 정답은 아니기때문에 직접 자신에게 맞는 폰트와 글꼴, 줄간격을 찾아서 변경해보시기 바랍니다.
그리고 웹폰트(eot)의 경우 익스플로러에서 밖에 호환을 하지않고 일부 폰트는 저작권에 문제가 될수 있기때문에 변경하실때 유의하셔야합니다.

신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 와! 버섯공주다! (괜히 오바를...)

    가독성을 높여 주는 최적의 글꼴과 간격 찾기. 정말 쉬운 듯 하면서도 어려운 것 같아요. +_+
    좋은 정보 감사합니다. ^^

    2010.07.05 01:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 역시 공주님의 글간격 폰트글꼬하며 가독성이 너무 좋아보이세요 !
      다음에 글꼴 종류랑 크기 줄간격도 이야기좀해주세요 ^^;;

      2010.07.05 08:38 신고 [ ADDR : EDIT/ DEL ]
  3. 티비님 이제야 찾아뵈었습니다^^ 일요일날은 정신이 없네요 교회다녀와서
    축구 3시간 하고 저녁먹고 피곤해서 아웃했습니다.
    벌써 새로운 한주입니다. 한주동안도 좋은 일 많이 생기시길^^
    트위터 개설했답니다^^ 아직은 뭔가뭔지모르지만 차근해 배워가야죠
    그렇지 않아도 글자간격늘일려 했는데 스킨에서 해야되는군요
    글쓰기메뉴에도 나와있어서 시도해봤는데 안돼더라구요 포기했었는데
    잘보고 따라하겠습니다.^^

    2010.07.05 06:44 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 활기님 축구 정말 좋아하시는것 같아요 !!
      트위터 저도 어제 맞팔로우 햇어요 ㅎㅎ
      줄간격은 1.5가 제일 무난하실꺼예요!!
      즐거운 한주시작하세요 !!

      2010.07.05 08:39 신고 [ ADDR : EDIT/ DEL ]
  4. 좋은 정보 정말 감사합니다.
    요즘 블로그에 폭 빠져 사는데 당장 적용해 봐야겠습니다. ^^

    2010.07.05 06:58 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 방문자들에게 가장 편안한 문장을 읽을수 있도록 자신의 스킨에 맞게 맞추어 주는게 좋을것 같아요 줄간격은 공통적으로 1.5가 가장 좋은것 같네요...

    2010.07.05 08:05 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 1.7정도를 해버리면.. 카테고리 메뉴가 벌어지더라구요
      그래서 개이적으로 새라새님 말씀처럼 1.5정도가
      적당해보이는것 같더라구요 ^^;;

      2010.07.05 08:39 신고 [ ADDR : EDIT/ DEL ]
  6. 저는 바탕에 2.0이었는데 변경중이에요 ㅎㅎ
    올려주신 분들과 전 확실히 다르네요

    2010.07.05 09:47 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 포스팅하면서 글이 눈에 확 안들어오는것 같아서
    글간격을 어떻게하면 되나했는데..
    역시 티비님!! 고마워요 ㅋㅋ

    2010.07.05 12:21 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 13px, 1.8입니다. 시원시원한 게 좋아서 줄간격을 평균치보다 크게 잡았습니다. 맑은고딕이나 나눔고딕도 생각해봤는데 모니터에 따라 흐려져서(클리어타입 적용시) 가독성이 더 떨어지는 경우가 종종 생겨서, 지겨워도 만만한 굴림으로 쓰고 있습니다. 요즘은 본문폭이 고민입니다. 700px(사이드바까지 합쳐 950px) 2단으로 쓰다가 800px 1단으로 바꾸고 나니 고해상도에 모니터에선 좌우여백이 많이 남아 허전해서 시험삼아 920px으로 넓혔습니다. 큰 사진 올리기엔 좋겠지만 긴글(장문) 가독성이 좀...-┌ 처음의 2단스킨으로 돌아갈까 싶기도 하고, 메뉴나 카테고리별로 css 별도지정하는 기능(ex. 일반 카테고리는 2단, 사진 카테고리만 1단으로 지정한다든지..)이 구현/지원되었으면 좋겠습니다.
    가독성 확인 예문(?) - http://zizim.net/237

    2010.07.05 18:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 가독성은 굴림체가 최고인것 같더라구요
      저도 zizim님처럼 고민하고 있다가
      양쪽여백에 회색을 넣어줘서 블로그에 조금더
      집중하도록 해봤어요 ^^;;
      http://nextgoal.tistory.com/587

      2010.07.05 23:04 신고 [ ADDR : EDIT/ DEL ]
  9. 오호~ 좋은 정보입니다. 저는 유독 글을 길게 쓰는 경향이 있는데 가독성을 높이기 위해서 이리저리 고민을 해보던 중이었답니다. 아무래도 글꼴, 글씨크기, 줄간격등을 통해서 조절을 할수가 있기는 한데 어떤것이 가장 좋을까 생각만하고 실천은 전혀 하지 않던 상태였거든요 --;; 게다가 무엇을 만져야 할지도 모르겠고요~ ㅋㅋ
    한글이나 워드작성이라면 간단하게 적용했을텐데 아무래도 블로그 내에서는 저 혼자힘으로는 --;;; ㅋㅋㅋ
    어쨋든 이렇게 티세님의 포스팅을 통해서 또다시 좋은 정보를 통해서 블로그를 다시 한번 업그레이드 시킬수 있어서 좋네요~ 이제 곧 더욱더 깊은 새벽이 될텐데 오늘도 하루 힘차게 시작하세요~ 안녕히 주무시고 좋은 꿈꾸시기를 바랄게요. 그건 그렇고 티세님 포스팅에 댓글양이 장난이 아니네요. 제가 댓글달기가 무서울 정도~ ^^ ㅋㅋㅋㅋ

    2010.07.06 02:05 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 저는 글을 워낙 문단을 나누는 편이라 라인간격은 신경안쓰이는데 글씨체는 조금 신경쓰이네요.
    티비님 글에서 다른분들 비교해 놓은걸 보니 나눔고딕이 잘 보이는거 같은데 댓글에 보니 환경에 따라 또 다르다고.. ㅎㅎ 지금것도 나쁘진 않은데 조금 작은 느낌이... 흠.. 여튼 이리저리 해봐야겠어요. 한RSS등록해놓은 티비님 블로그를 보니 깜깜하군요... 다른뜻이 아니라.. 언제 다 읽나.. ㅋㅋ 좋은글 잘 읽었습니다.

    2010.07.06 03:11 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 가독성 이거이 정말 중요하더군요..
    글크기나 간격을 거기서 조정하는거네요..
    하나 배워갑니다. 그런데 어떠게 가독성이 좋을까요? 고민 좀 해봐야 겠네요 ^^

    2010.07.09 09:02 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 티비님 블로그에 초보 블로거를위한글이 참많네요.

    싸그리다 댓글달기 민망할정도로 정독해가는중입니다. ㅋ

    2010.09.28 15:34 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 언젠가 본 것 같은데 메모를 하지 못했네요. 다시 한번 고맙습니다.^^

    2011.03.10 12:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 좋은 정보 감사합니다.^^
    웹폰트 적용방법을 이제야 배우게 되었네요

    2011.03.23 11:09 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 좋은 정보 감사합니다.^^
    웹폰트 적용방법을 이제야 배우게 되었네요

    2011.03.23 11:09 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 안녕하세요
    질문이 있습니다

    티비님 블로그처럼 첫화면 글 제목(티에디션)도 맑은 고딕으로 설정하려면 어떻게 해야 하나요?

    2011.04.23 15:17 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 티비님...제 맑은 고딕으로 바꿨는데도 글쓰기에서 폰트변경 할려니까 맑은 고딕이 안보이네요..^^;;
    그리고 글씨는 왜케 회색으로 뜨는거죠?? 까맣게 쓰고 싶은데....ㅡㅡ;;;
    스킨은 같은걸로 쓰고 있는데요...

    2011.05.13 12:43 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 비밀댓글입니다

    2011.05.18 01:20 [ ADDR : EDIT/ DEL : REPLY ]
  19. 항상 많은 정보에 감사드립니다.
    블로그를 시작한지 언 두달이 되어가는데,
    티비님을 롤모델로 삼아, 열심히 달려가고 있답니다.
    언제나 감사하고 감사합니다

    2011.05.20 09:21 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 흠.... 포스트 타이틀도 그렇고 다 px 단위를 쓰는데 본문도 px로 적용할지, pt로 적용할지 고민이네요..
    px는 모니터픽셀 크기에따라 바뀌는 지라....

    2012.02.01 15:31 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 잘봤습니다. 가독성부분은 저도 신경을 많이 쓰고 있는 부분이긴 한데.. 이렇게 티비님의 포스팅을 읽고나니..
    과연 제대로 했는지 고민이 되는군요. 저같은 경우는 금융관련글을 주로 쓰다보니 신뢰성을 높이기 위해서 렉시새봄 폰트를 사용하고 있습니다. 좀더 많은 고민을 해봐야될것 같네요..^^

    2012.09.25 05:10 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바