웹에 공개용(무료) 한겨레 결체 적용하기(굴림체는 지겨워)
한글로 API :: 2007/06/09 23:54명조체를 되찾자
폰트 저장 -> 웹폰트로 변환 -> 계정에 올리기 -> CSS에서 적용
굴림체는 지겨워~
1. 공개용 폰트 구하기
폰트는 벡터 방식이 확대, 축소와 상관없이 가독성을 제공한다. 종류로는 종류로는 True Type, ATM, Type1,2,3,4 등이 있다.(참고)
True Type은 공개용도 많이 있다. (예 은진체, 티티체)
몇 년전에는 신문사들이 자신들을 대표하는 글자체를 공개한 적이 있다. 하지만 글꼴은 출력용과 화면용으로 나뉘는데 추측건데 한겨레 결체나 조선일보 명조는 출력용으로 웹에 적용하기에는 pc모니터의 해상도가 너무 낮다. 1024X768에서 14pt로 크다면 클 수 있는 크기만큼 키워야한다.
<15pt로 clear type적용 전, 덧)글자색이 진검정이 아니었다.＃000000로 수정하고 가독성이 좋아졌다.>
우리글닷컴에서는 출판용이 아니라 모니터용인 '벡터스크린 명조체'를 만들었다. 이곳에 가면 적용된 모습을 볼 수 있다. 1년무료 이벤트도 했지만 지금은 유료로 사용해야 하고 웹페이지에서 곧 배포한다고 적혀있다. 언제쯤?
일단 마음에 드는 글자체를 받자
참고 공개된 한겨레 결체 (실험결과 조선일보 명조보다 14pt에서 가독성이 좋았으나 영문이 조선일보 명조보다 덜이쁘다.)
2. 압축을 풀고 글꼴 파일을 C:\WINDOWS\Fonts로 이동해서 설치하자
3. 변환은 소야님 강의를 참고한 잇힝! 님의 TTF폰트를 EOT웹폰트로 변환하기!를 보자 (수고를 덜어주셨다.)
(쏘야님 강의는 초보자에게는 어려울 수 있다.)
덧) 한겨레 결체는 basic latin에서 샵이 누락되어 있다. 번거롭지만 'ㅁ+한자키+1'로 적어주자.
4. 변환의 결과물로 생긴 eot파일을 계정에 올립니다. (티스토리는 댓글 참조)
5. URL을 기억합니다.
예) 티스토리의 경우 /images/(파일명).eot 가 됩니다.
6. 본문에 적용
기본으로 참고 할 소야님 강의
저의 경우 CSS 문두에 다음을 삽입(참고로 제가 지정한 파일명은 hani)
의미는 대충 hani.eot로 올려진 폰트의 이름이 webfont라는 뜻으로 자신이 기입한 파일명에 따라 달라지겠다.
다음은 본문에만 적용하는 방법
skin.html에서 본문 내용을 나타내는 치환자 를 찾으세요
저는 아래와 같습니다.
</div>
이 때 'article'로 CSS를 검색합니다.
저는 아래와 같았고
line-height:160%;
padding: 20px 10px;
word-break:break-all;
text-align: justify;
overflow: hidden;
font-family: "webfont";font-size: 14pt;
font-color: ＃000000;
}
빨간 부분이 웹폰트 적용을 위해 새로 기입한 부분입니다.
그리고 글자 크기인 14pt는 기호에 맞게 수정하실 수 있습니다.
7. clear type 적용하기
해상도가 낮아 원하는 가독성이 나오지 않는다면 MS에서 제공하는 다음 프로그램을 설치하여 설정하자
setup.exe안경맞추듯 몇가지 선택항 중 자신이 잘 보이는 것을 선택하고 나면 훨씬 가독성이 좋아 진 것을 확인 할 수 있다.
이게 뭐하는 건지는 다음 사이트 참고
맑은 고딕이 뭐가 좋은거야? 맑은 고딕 vs. 돋움
※ clear type 적용비교
부담시런 15pt로 clear type적용 전↑
↑clear type적용 후 13pt
글자 크기가 줄었지만 가독성은 좋아진 모습
폰트에 대한 원천적인 궁금증은 아래 참고
폰트(Font)의 이해와 종류
