모든 디자이너가 알아야 할 15 가지 온라인 타이포그래피 도구
인쇄술은 웹에서 가장 기본적인 것들 중 하나이기 때문에 타이포그래피는 디자인의 기초입니다. 선택한 인쇄술은 웹 사이트의 여러 측면에 영향을 미칩니다. 가독성, 전반적인 사용자 경험. 디자이너와 개발자는 타이포그래피의 기본 원리를 알아라. 에 읽기 쉬운 즐거운 디자인 만들기.
우리는 이전에 폰트 페어링 도구에 대해 이야기 해 왔으며, 오늘은 빌드 및 / 또는 디자인 한 웹 사이트에서 더 나은 독서 환경을 제공 할 수있는 도구를 입력 해 보겠습니다..
여기에는 플러그인, 온라인 도구 및 스크립트가 있습니다. 멋진 헤드 라인 만들기 과 깨끗한 읽을 수있는 텍스트.
유형 판
디자인 선택을하지는 않지만 일반적인 인쇄용 템플리트의 스타일을 지정하여 올바른 마크 업을 정의합니다. 또한 텍스트 복사를 올바르게 스타일 지정하는 방법에 대한 팁을 줄 수 있습니다..
체크 아웃: 데모 | 선적 서류 비치
구텐베르크
Gutenberg는 개발자와 디자이너를위한 유연하고 사용하기 쉬운 타이포그래피 시작 키트입니다. 기본 유형 크기, 선 높이 및 최대 너비를 설정하는 데 도움이됩니다. 구텐베르크 (Gutenberg)는 오픈 소스 프로젝트이기 때문에 자유롭게 기고하고, 개조하고 수정할 수 있습니다..
체크 아웃: 데모 | 선적 서류 비치
Lettering.js
Lettering.js는 커닝 유형을 제어 할 수있는 jQuery 플러그인입니다. 그것은 당신이 편집 디자인을 쉽게 얻고 코드를 관리하게합니다. 이 웹 사이트는이 플러그인으로 영감을 얻기 위해 만들어진 활판 인쇄의 놀라운 예를 보여줍니다..
체크 아웃: 데모 | 선적 서류 비치
Typebase.css
Typebase.css는 맞춤형 타이포그래피 스타일 시트입니다. 그것은 saas와 더 적은 버전을 포함하고 현대 웹 프로젝트로 쉽게 변경됩니다.
체크 아웃: 데모 | 선적 서류 비치
FitText
FitText는 웹 사이트 글꼴 크기를 유연하게 만드는 플러그인입니다. 다양한 화면 해상도를위한 확장 가능한 헤드 라인을 얻는 데 도움이됩니다. 즉, 타이포 그라피를 반응 적으로 만드십시오. 거대한 텍스트 만 표시하기 위해 만들어졌습니다..
체크 아웃: 데모 | 선적 서류 비치
Kerning.js
Kerning.js는 CSS로 타이포그래피를 자동으로 변환, 크기 조정 및 수정할 수 있도록 도와줍니다. Kerning.js를 시작하는 것은 쉽습니다..
체크 아웃: 데모 | 선적 서류 비치
조판.
Typesettings.css는 최소한의 웹 프로젝트 또는 블로그를 만들기위한 놀이터입니다. 여기에 사용 된 모든 타이포그래피 스타일은 그래픽 디자인 기본 사항에서 영감을 받았습니다..
체크 아웃: 데모 | 선적 서류 비치
륙색
Rucksack을 사용하면 글꼴 크기에 대한 새롭고 반응이 빠른 속성 덕분에 놀라운 유체 활판 인쇄술을 제작할 수 있습니다. 반응 형 타이포그라피 제작이 매우 쉽습니다..
체크 아웃: 데모 | 선적 서류 비치
FlowType.JS
가장 가독성이 높은 타이포그래피는 한 줄당 45 ~ 75자를 포함하지만 개발자에게는 균형을 찾는 것이 어려운 과제입니다. FlowType.JS는 특정 요소의 너비에 따라 글꼴 크기와 그 이후의 줄 높이를 변경합니다..
체크 아웃: 데모 | 선적 서류 비치
Blast.js
Blast.js는 텍스트를 구분하여 타이포그래피를보다 쉽게 조작 할 수 있도록 도와줍니다. 문자, 단어, 문장 및 요소와 같은 4 개의 내장 구분 기호가 포함되어 있습니다. 또한 사용자 지정 식과 구와도 일치시킬 수 있습니다..
체크 아웃: 데모 | 선적 서류 비치
슬랩 텍스트
slabText는 헤드 라인을 행으로 분할하여 사용 가능한 가로 공간을 완벽하게 채우는 간단한 스크립트입니다. 이 스크립트는 사용 가능한 너비를 픽셀 글꼴 크기로 나누어 각 행에 설정할 이상적인 문자 수를 계산합니다.
체크 아웃: 데모 | 선적 서류 비치
유형 척도
유형 스케일을 사용하면 프로젝트에 적합한 유형 스케일을 미리보고 선택할 수 있습니다. 규칙은 없습니다. 글꼴 크기, 크기 및 다른 웹 글꼴로 놀기 만하면됩니다..
체크 아웃: 데모 | 선적 서류 비치
인쇄상의
타이포그래피는 활판 인쇄술을 반응 적으로 만드는 데 도움이됩니다. 당신이해야 할 일은 단지 몇 가지 글꼴을 선택하고, 몇 가지 설정을하고, 멋진 반응 타이포그래피를 얻는 것입니다..
체크 아웃: 데모 | 선적 서류 비치
전형
Typi는 반응 형 타이포그래피를 쉽게 만들 수있는 Saas 믹스입니다. HTML 및 기타 요소에 대한 글꼴 크기 및 행 높이를 만듭니다. 또한 Typi는 라인 높이를 계산하는 수직 리듬 기능을 가지고 있습니다..
체크 아웃: 문서
Lining.js
Lining.js 플러그인을 사용하면 웹 인쇄술을 완벽하게 제어 할 수 있습니다. Safari, Google 크롬, Opera 및 Mozilla Firefox와 같이 널리 사용되는 브라우저에서 지원됩니다..
체크 아웃: 데모 | 선적 서류 비치
보너스 : 2 더 많은 도구!
웹 유형의 상태
State of the Web Type은 웹 주변의 유형 및 기능에 대한 지원에 대한 최신 데이터를 제공하는 웹 사이트입니다. 커닝, 대문자 띄우기, CSS 글꼴로드 등과 같은 검색이나 카테고리를 사용하여 필요한 것을 정확하게 찾을 수 있습니다..
활판 인쇄
활판 인쇄는 굉장한 웹 및 스케치 플러그인으로 한 글자 단어 뒤에 줄 바꿈하지 않는 공백을 넣고 숫자와 단위를 연결할 수 있습니다. 또한 이중 공백, 입력, 점 및 기타 오타를 제거하므로 읽기 쉽고 깨끗한 아름다운 타이포그래피를 얻을 수 있습니다..
체크 아웃: 문서
