웹에서 글쓰기 - 폰트 및 화면 설정

블로그 글의 가독성을 높이려고 폰트와 줄간격, 문단간격 등에 대해서 알아보았다. 폰트에 대한 글은 많은데, 다들 조각, 조각이라서...ㅠ 한번 정리해서 올려 본다. 공부할게 많구만...ㅋ

우선, 폰트에 대해서 이해해야 한다.

폰트에도 저작권이 있고 용도와 구현 방법등에 따라서 구분이 많다. 특히, 형식에 대해서 여기 저기서 만들어놔서 호환성 문제가 있는데 자세한건 위키로! http://ko.wikipedia.org/wiki/서체

웹에서 폰트에 대한 설명 - 웹폰트

각기 다른 형식이 존재하는 것이 가장 큰 문제가 되는 부분은 웹이 아닐까. 다른 플랫폼들도 웹에서 모두 만나는데, 상황이 안될경우 웹디자이너의 의도와 다르게 표현되게 된다. 그래서 사람들이 모여서 웹 폰트를 만들었다.

아래는 웹폰트에 대한 글이다.
http://ko.wikipedia.org/wiki/웹오픈폰트_형식
http://hardworker.tistory.com/113

아래는 웹폰트를 적용하는 방법(CSS)
http://aboooks.tistory.com/153
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

웹폰트를 저장할 곳에 대한 결정

웹폰트는 결국 웹상에 폰트가 존재해야 한다. 어떤 장치에서든 사용할 수있도록. 웹상의 어디에 저장할 것인지에 대해서 결정해야 한다.

자신의 블로그에 저장 (웹페이지와 같은 도메인에 저장)

이 경우에 웹 폰트 파일을 확보해야 하고, 접근이 가능한 곳에 올려두어야 한다. 티스토리에 적용하는 방법은 아래 포스팅을 참고~ 단, EOF로 할경우 IE만 사용가능하다. (위에 EOF, WOFF 차이를 확인)
http://brownie1.tistory.com/164

호스팅 서비스를 이용

찾다보니 모빌리스라는 곳에서 호스팅을 했었다고 하는데 구글로 통일되는 양상이다. 티스토리에 적용하는 방법은 아래 포스팅이 젤 간단하게 정리한것 같다.
http://aboooks.tistory.com/241

자신이 가지고 있는 특정 폰트를 적용하고 싶을때는 직접 올려서 사용하고, 구글에서 제공하는 웹폰트를 쉽게 적용하고 싶을때는 링크해서 가져다 쓰면 편하다.

그외 줄/글자 간격 설정 방법등...

가독성은 폰트보다 오히려 줄/글자 간격등이 더 중요하다. 주요 설정 값을 어떻게 정하면 좋을지 고민해서 각자 적용하면 된다.

본문 글자 간격과 줄간격, 폰트에 대한 간단한 설정 방법
http://tkdlzhdl.tistory.com/75

단지, 이렇게 하면 된다고만 나와있길래 추가 내용을 아래 덧붙인다~

p { margin: 8px 0px 8px 0px; line-height: 120%; }

p태그는 문단을 뜻한다. pharagraph. 문단의 설정에서 마진값을 조절해야 한다. margin 다음에 오는 속성 4개는 상,우,하,좌 순의 여백을 의미한다. (시계방향) 적당히 넓혀놔야 보기 좋다. 그리고 line-height 은 줄의 높이를 뜻한다. 이 부분도 굉장히 중요하다. 너무 넓어도 이상하고 좁으면 답답한 느낌이 든다. 적당히 잘 맞춰야 한다.

문단 사이에 줄바꿈을 한줄씩 넣는 사람은 그것도 고려해야 한다. 나는 이부분때문에 여러 사이트를 확인하며 참조를 했는데, 나는 줄바꿈 안쓰는 것으로 결정! 취향의 문제지만 때론 내 취향을 명확하게 말해주는 것이 듣는 사람을 배려하는 것이라고 생각하기에 단호하게 말하기로ㅋㅋㅋ 줄바꿈 노노~ 왜? 아래 포스트로ㅎ
문단 그리고 줄바꿈과 관련된 나의 잘못된 습관

줄바꿈이 불필요한것은 아니다. 그러나 불필요한 줄바꿈을 자제하고 문단을 적절히 나눠서 가독성도 높이고 의미상 구분을 명확히 하여 표현력을 높이는 것이 중요하다.

폰트로 시작해서 줄바꿈으로 끝났는데, 누군가 보기위한 글이라는 생각으로 배려하는 마음으로 조금 더 신경쓰면 좋을것 같다. 종이에 펜으로 적는다고 하면 우리는 자연스레 어떤 종이에 어떻게 적을지 구분해서 적는다는 사실이 웹에서도 이뤄지길.