[중급] typography in web design

모이자 앱
팔로우하기(关注)
모바일버전

자료·공부 채널

처음으로

정보 채널

친목 채널

라이프 채널

휴식 채널

자료·공부 채널

조선족 채널

베스트 게시물

뉴 스 모이자114 취업센터 쇼핑몰 꽃배달 광고안내

2024.04.28.(일요일)

공지사항 이용안내

주간 베스트 월간 베스트 3개월 베스트 베스트 게시물

[Windows 10 전용 팁] > [Mac Mojave_10.14.3 설치] 뻔한건 빼고, 다년간 모아놓은 팁을 공유합니다. 1 8,586 IMKQ

[Windows 10 전용 팁] > [WIN10 설치용 USB를 NTFS로 포맷] 뻔한건 빼고, 다년간 모아놓은 팁을 공유합니다. 1 8,180 IMKQ

[Windows 10 전용 팁] > [바탕화면 및 사진뷰어] 뻔한건 빼고, 다년간 모아놓은 팁을 공유합니다. 1 6,598 IMKQ

포토샵으로 사진을 그린 그림처럼 보이게 하기 1 5,597 나나

[Windows 10 전용 팁] > [작업표시줄] 뻔한건 빼고, 다년간 모아놓은 팁을 공유합니다. 0 8,676 IMKQ

인터넷 창 실수로 닫았을 때 복구하는 방법 0 1,182 NiaoRen

자료·공부 채널IT공부

위챗(微信)에 공유

뻭 | 2010.02.19 21:23:46 댓글: 1 조회: 1964 추천: 1

분류웹 디자인 https://life.moyiza.kr/itstudy/1750721

제목 그대로 typography in web design 즉 웹디자인에서의 활자체선택에 대해 얘기하려 합니다. 웹디자인에서 왜 폰트선택에 신경써야 할지 궁금한 분들이 있을겁니다. 맞춤한 폰트선택은 포스팅의 가독성을 높일뿐만 아니라 전체 웹페이지의 첫인상에 가장 중요하다고 봅니다. 물론 이미지로 깍아붙여놓인 페이지는 그냥 장식일뿐이지 실제 웹페이지의 핵심은 포스팅속에 있기때문에 유난히 신경쓸 필요가 있습니다.

폰트의 모양새로 구분할때 대개 serif, sans-serif, monospace 이 세가지로 구분할수 있습니다. serif는 변두리가 수식되어 있는 모양새를 취하고 sans-serif는 변두리가 수식되어 있지 않은 종류입니다. 나머지 monospace는 매개 특수부호를 포함한 모든 문자가 동일한 넓이를 갖고 있는 폰트입니다. monospace는 고유의 특징으로 프로그래머들이 편집기에서 사용되는 프로그래밍폰트로 사용하고 있기때문에 여기서는 다루지 않기로 합니다.

Sans-Serif: Arial, Helvetica, Verdana, Geneva, Lucida Sans Unicode, Lucida Grande, Tahoma

Serif: Georgia, Times New Roman, Times, Palatino Linotype, Book Antiqua, Palatino

보시다싶이 sans-serif는 깔끔하고 정연한 모양새이다보니 웹페이지의 가독성을 높여주는 폰트로 사용되고 있고, serif는 책이나 잡지에서 사용되는 폰트처럼 약간의 화려함을 갖고 있습니다. 그러므로 웹디자인에서 특정부분을 디자인할때 보통 각자 사용용도로 분류하고 있습니다. 모이자를 예를 들자면 이런 식으로 사용하고 있습니다.

12px/14px "Tahoma","gulim","simsun","Trebuchet MS", sans-serif;

font-size/line-height font-family

많은 한글로 된 블로그나 개인싸이트를 보면 손글씨체로 장식된것을 발견할수 있는데(과거얘기지만...), 눈만 어지럽지 애초에 원하던 시각적 효과도 잃었을 뿐만 아니라 서버에 부하도 어느정도 줄수 있습니다. 굳이 추천할만한 폰트는 네이버에서 무료로 제공하고 있는 나눔고딕체입니다. 직접 사용해보면 그 깔끔함에 감탄이 저절로 나올 정도로 훌륭한 서체입니다.

css에서 기본적인 폰트 디자인이 완성되였을때 cross-browsing도 고려해봐야 합니다. ie에서만 제대로 돌아간다고 때려치지 말고 chrome, firefox, safari등 다양한 웹브라우저에서도 정확히 표현되여야 성공한 셈입니다. cjk의 경우는 조금 더 복잡하기는 하지만, 많은 실천과 테스트를 해보시고 자신의 css템플렛을 만들어 사용해보시는것도 좋은 방법이라고 생각하빈다.

마감으로 참조할만 툴들을 소개합니다.

http://www.smashingmagazine.com/

http://jigsaw.w3.org/css-validator/

http://www.mozilla.com/en-US/firefox/firefox.html

http://getfirebug.com/

http://browsershots.org/

http://code.google.com/apis/webfonts/

추천 (1) 선물 (0명)

기적의 한국어 단어 --韩语单词零基础入门王 (含光盘）

美味水果-맛있는 과일

藏在哪儿了-어디어디 숨었나

주덕해평전--朱德海评传

멘토상사의 선물--优秀上司的礼物 입점신청

첨부파일 다운로드 ( 1 )

20061031_resume_fonts_serif_sans-serif.png | 16.3KB / 2 Download

위챗 페이스북 트위터 웨이보 IP: ♡.50.♡.8

(♡.199.♡.19) - 2010/02/20 12:50:31

좋은 글 감사합니다. 앞으로 자주 올려주시면 감사하겠습니다.

자료·공부 채널IT공부

총 3,006 개의 글이 있습니다.

제목	글쓴이	날짜	조회
처음 오신분들 필독!!![최종수정일:2003.9.21] 1		2003-09-20	11779
처음 오신분들 필독!!![최종수정일:2003.9.21] 9		2003-09-20	11324
처음 오신분들 필독!!![최종수정일:2003.10.26] 3		2003-09-20	20400
[SAP모임] SAP MM 자격증 공부 3	지구인	2010-08-27	19265
[SAP 모임] SAP 미니 프로젝트 진행 27	지구인	2009-09-07	13565
웹디자인 게시판 사용약관		2010-01-29	15534
공개소스 사용약관 1		2004-10-07	16640
[웹 디자인] [중급] typography in web design 1	뻭	2010-02-19	1964
2627 [컴관련 강좌·팁] 끝없이 열리는 새 창 한번에 닫기 1	꿀단G	2010-02-12	2178
2626 [컴관련 강좌·팁] 웹페이지 로딩빠르게하기	꿀단G	2010-02-12	1790
2625 [컴관련 강좌·팁] 악성코드로부터 탈출하는 방법	꿀단G	2010-02-12	1830
2624 [컴관련 강좌·팁] 컴퓨터 다루기 75가지 (31~75)	꿀단G	2010-02-12	2200
2623 [컴관련 강좌·팁] 컴퓨터 다루기 75가지 (1~30)	꿀단G	2010-02-12	2998
2622 [컴관련 강좌·팁] 하드 디스크 오래오래 쓰는 간단한 비결	Fragrance2	2010-02-12	1426
2621 [컴관련 강좌·팁] 1초도 틀리지 않는 윈도 시간 맞추기 1	Fragrance2	2010-02-12	1851
2620 [컴관련 강좌·팁] 짜증나는 동영상 플레이어 잘 나오게하는 방법	Fragrance2	2010-02-12	2054
2619 [컴관련 강좌·팁] 컴퓨터 데이터 완벽하게 삭제&복구 하는 법	Fragrance2	2010-02-12	2107
2618 [컴관련 강좌·팁] 컴퓨터 이상시 각종 해결 방법	Fragrance2	2010-02-12	2313
2617 [컴관련 강좌·팁] 익스플로러에서 한글이 안써질때 대처법	Fragrance2	2010-02-10	1563
2616 [컴관련 강좌·팁] 움직이는 슬라이드 사진 만들기	Fragrance2	2010-02-10	2374
2615 [컴관련 강좌·팁] 에러,다운,,해보세요.엄청빨라집니다	Fragrance2	2010-02-10	1729
2614 [컴관련 강좌·팁] 공개하고 싶지않은 인터넷주소만 골라 지우는방법	Fragrance2	2010-02-10	1453
2613 [컴관련 강좌·팁] 인터넷 동영상 녹화법	Fragrance2	2010-02-10	2483
2612 [공개소스] bingo!CMS core(일본어)		2010-02-05	3730
2611 [공개소스] Zend Framework 1.10.0 Full		2010-02-05	3395
2610 [컴관련 강좌·팁] 인터넷옵션 클릭 시 시스템제한 때문에 실행할 수 없습니다 라는 메세지가 뜰 때.	꿀단G	2010-02-04	1941
2609 [컴관련 강좌·팁] 이 정도 알면 인터넷 고수 ~~~!!!!!! 3	꿀단G	2010-02-04	2982
2608 [컴관련 강좌·팁] 자주 접하는 컴용어	꿀단G	2010-02-04	1527