홈페이지 » UI / UX » 타이포그래피 이해하기 10 유용한 도구 및 리소스

    타이포그래피 이해하기 10 유용한 도구 및 리소스

    타이포그래피에 대한 저의 마지막 기사에서 필자는 타이포그래피의 디자인과 웹 사이트의 레이아웃을 개선하고 사용자 경험을 향상시키기 위해 조작 방법에 대해 썼습니다. 이 기사에서는 목록에 있습니다. 타이포그래피에 대한 10 가지 도구 웹에서.

    이것들은 HTML 그리드와 컨텐트 영역을 구축하고, CSS 스타일을 만들고, 글꼴 이름을 생성하고, 다른 멋진 것들을 만드는 데 도움이 될 수 있습니다. 아래의 링크 중 일부를 확인하고 게시 토론 영역에서 의견을 보내주십시오..

    추천 도서 : 타이포그래피 이해하기 : 웹 작성하기

    글꼴 표

    이 온라인 가이드는 24ways 디자인 블로그에 게시되었습니다. 기본적으로 다양한 소프트웨어 공급 업체에서 찾을 수있는 모든 표준 웹 글꼴의 매트릭스 표가 있습니다. 인기있는 타이틀에는 Windows, Mac OS X, Microsoft Office 및 Adobe Creative Suite 프로그램이 포함됩니다..

    색 대비 점검

    색상 대비는 종종 표준 흑백 모델 밖에서 벤처 할 때 문제가됩니다. 당신이 시합을 찾으면 그것은 디자인 완성과 같은 느낌을 갖습니다. 그럼에도 불구하고 나쁜 색상 조합 선택은 매우 나빠 보이며 전반적인 디자인에 부정적인 영향을 미칩니다. 이 작은 웹 도구를 사용하면 스타일 레이아웃에 따라 서로 일치하는 색상 세트를 선택할 수 있습니다..

    HTML-Ipsum

    텍스트를 출력하는 것 이상의 기능을 수행 할 수있는 Lorem Ipsum 도구가 필요합니까? 이 온라인 HTML 생성기는 가장 일반적인 페이지 요소에 대한 코드 블록을 생성합니다. 일부 예제에는 정렬되지 않은 목록, 정의 목록, 웹 양식, 표 및 기타 다양한 솔루션이 포함됩니다..

    유형 차트

    Typechart는 CSS 개발자로서 제가 가장 좋아하는 도구 중 하나입니다. 내 시스템의 특정 글꼴을 웹 프로젝트와 일치시키려는 경우가 자주 있지만 전체 컬렉션을 뒤집을 시간이 없습니다. 이 멋진 도구를 사용하면 인기있는 글꼴 모음을 선택하고 적절한 CSS 코드를 다운로드 할 수도 있습니다.!

    PX-to-EM.com

    기본 브라우저 텍스트 크기를 재설정하지 않으면 em과 픽셀을 일치시키는 데 문제가있을 수 있습니다. 이 브라우저 내 앱은 px에서 em으로의 변환 테이블과 사용자 인터페이스를 제공합니다. 아주 간단한 도구이지만, 정말 간단한 기능을 갖춘 편리한 가이드를 제공합니다. 무료 가격표를 이길 수는 없습니다..

    CSS 유형 세트

    정말 초보자 용 도구이므로 CSS Type Set를 오래 사용하지 않는 것이 좋습니다. 선택한 특정 글꼴 속성을 기반으로 CSS 코드를 생성 할 수 있습니다. 처음에는 매우 유용했지만, 시간이 지남에 따라 몸을 기댈 수있는 버팀목이되었습니다. 그리고 CSS 속성을 스스로 마스터 할 동기가 없습니다. 그러나 프로젝트에서 시간을 절약해야한다면이 도구를 간과 할 수 없습니다.

    일반적으로 뒤집기

    글꼴 미리보기 라이브러리의 정말 독특한 예가 하나 있습니다. 전형적으로 뒤집기는 당신의 운영 체계에 고유 한 소수의 글꼴을 포함합니다. 글꼴 디렉토리를 자동으로 스캔하여 가장 안전한 웹 솔루션을 선택합니다. 두 옵션을 나란히 비교하고 원하는 옵션 중에서 쉽게 선택할 수 있습니다. 이것은 책갈피를 작성하고 마지막 순간까지 생각하지 않는 또 하나의 훌륭한 시간 절약 도구입니다..

    활판 인쇄 그리드

    HTML과 CSS에서 그리드를 중심으로 디자인하는 것에 대해 많은 이야기가 있습니다. 당신은 그리드가 작동하는 방식에 대한 개념을 이해하고 픽셀 단위로 웹 사이트를 측정하는 것도 마찬가지입니다. CSS-Tricks의이 그리드 튜토리얼은 디지털 시대의 타이포그래피의 기초를 소개하는 가이드 투어와 같습니다. 웹 디자인 분야에서 훨씬 더 진보 된 주제입니다. 그러나 인내심이 있다면 세부 정보를 통해 이러한 그리드 속성이 실제로 페이지 레이아웃에 어떻게 영향을 미치는지 확인하는 것이 좋습니다..

    WhatTheFont!

    우리는 모두 정말 멋진 식별 할 수없는 글꼴로 로고나 이미지를 발견했습니다. 폰트는 몇 년 동안 인터넷을 통해 만들어졌으며 여전히 내 마음에 드는 곳입니다. 업로드 할 이미지를 선택하면 스크립트는 그림 내의 텍스트를 분석하여 유사한 서체와 일치시킵니다. 이 앱을 사용하면 편리하게 각 글꼴을 구입할 수있는 외부 제품으로 연결됩니다..

    기준선 / 선 높이 계산기

    마침내 라인 높이와 리듬 속성을 생성하는 정말 강력한 도구입니다. 단순히 기본 글꼴 크기 및 선 높이 값을 입력하거나 사용자 정의 CSS 코드를 측면에 포함하십시오. 이 앱은 몇 가지 스타일로 미리보기를 생성하므로 사용자의 웹 사이트에서 이러한 속성이 어떻게 보이는지 알 수 있습니다..