개발자를 위한 유용한 타이포그래피 라이브러리 및 프레임워크

 

웹에서 타이포그래피를 다루는 것은 정말 기발한 일이었습니다. 각 브라우저에는 예기치 않은 불일치로 이어질 수 있는 글꼴을 렌더링하는 자체 알고리즘이 있습니다.

글꼴 커닝, 글꼴 다듬기, DropCaps 만들기 등과 같이 글꼴을 제어하는 ​​데 사용할 수 있는 CSS 속성은 몇 가지뿐입니다. 게다가 글꼴과 관련하여 많은 레이아웃 문제를 처리해야 합니다.

좋은 소식은 웹사이트 타이포그래피와 관련하여 주도권을 잡는 데 사용할 수 있는 리소스가 있다는 것입니다. 다음은 이를 위해 사용할 수 있는 15가지 웹 도구, 라이브러리 및 프레임워크 입니다.

유형렌더링 5

간단히 말해서 TypeRendering 은 글꼴 렌더링을 위한 브라우저 엔진만 식별한다는 점을 제외하고 Modernizr과 유사하게 작동합니다. 이 라이브러리는 유형 렌더링을 위한 특정 스타일 지정 규칙을 적용하는 데 사용할 수 있는 발견을 기반으로 사용자 정의 클래스를 추가합니다.

커닝JS 2

커닝 은 아직 웹에서 사용할 수 있도록 사용자 정의할 수 없습니다. font-kerning현재 지원은 여전히 ​​열악하지만 새로운 표준 속성이 제공될 예정입니다. KerningJS 는 더 나은 커닝 제어를 위한 몇 가지 새로운 속성을 제공하는 Javascript 라이브러리입니다(예: -letter-kern.

#heading { -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0; }

위의 예는 비표준이며 KerningJS에만 적용할 수 있습니다.

라이닝JS 2

LiningJS 는 line단락의 각 줄에 클래스 를 추가하는 JavaScript 라이브러리입니다 . 이렇게 하면 선을 개별적으로 스타일 지정할 수 있습니다. 그것은 아이디어 시뮬레이션 ::nth-line(), ::nth-last-line()그리고 ::last-line여전히 CSS에 존재하지 않는 가상 클래스. 다음은 LiningJS를 사용하여 단락의 첫 줄에 스타일을 지정하는 방법의 예입니다.

p .line[first] { font-weight: 600; text-transform: uppercase; }

또한 LiningJS는 중국어 단락 흐름도 지원합니다.

UnderlineJS 7

UnderlineJS 는 텍스트에 밑줄을 더 잘 보이게 하는 JavaScript 라이브러리입니다. 데모를 확인하세요 2내가 의미하는 바를 보려면 라인 위로 마우스를 가져가십시오. 데모를 현재 CSS text-decoration표준 의 밑줄 출력과 비교하면 당신도 underlineJS의 팬이 될 것입니다.

흐름 유형 삼

이 플러그인은 특정 래퍼 너비에 따라 글꼴 크기를 동적으로 조정합니다. FlowType 을 사용하면 모든 화면 너비에서 한 줄에 이상적인 수의 문자를 적용할 수 있습니다. 라이브러리에는 최소/최대 화면 너비, 최소/최대 글꼴 크기 및 글꼴 비율을 설정할 수 있는 옵션이 있습니다.

그리드러버 4

GridLover 는 쉬운 슬라이더 UI로 타이포그래피 배열(크기, 줄 높이, 여백)을 위한 기본 스타일을 생성하는 훌륭한 도구입니다. SCSS, LESS 및 Stylus로 스타일을 생성하므로 사용하는 CSS-Preprocessor에 관계없이 프로젝트에 즉시 포함할 수 있습니다.

TypeScale 1

TypeScale 은 웹사이트에 적합한 글꼴 크기를 쉽게 결정할 수 있도록 도와주는 온라인 도구입니다. 이 도구는 사용하려는 기본 글꼴 크기, 배율 및 글꼴 모음을 삽입할 수 있는 간단하고 직관적인 GUI를 제공합니다. 결과가 시각화되어 적절한 값을 얻기 위해 스케일을 가지고 놀 수 있습니다. 완료되면 CSS를 가져옵니다.

글꼴 너비 2

FTW(Font-To-Width) 는 글꼴을 너비 컨테이너에 맞게 만드는 Javascript 라이브러리입니다. 글꼴에 필요한 단어 간격과 함께 글꼴 크기를 결정합니다. 멋진 헤드라인을 만들고 싶다면 시도해 볼 수 있는 라이브러리입니다.

FFFF대체 1

FFFFallback , 우아하게 저하될 최고의 글꼴 스택을 찾을 수 있는 편리한 도구입니다. 이 도구는 페이지의 글꼴 모음을 분석하고 대체 글꼴로 사용할 글꼴 집합을 제안하는 책갈피 형식으로 제공됩니다.

글꼴 쌍 5

Google 글꼴 은 수백만 명이 사용하는 가장 인기 있는 웹 글꼴 라이브러리 중 하나이며 500개 이상의 글꼴 패밀리를 호스팅합니다. 글꼴 쌍 은 쌍 으로 된 Google 글꼴 모음으로 글꼴 모음과 서체 사이의 다양한 조합을 쉽게 찾을 수 있습니다. 글꼴 쌍을 사용하면 글꼴 쌍을 선택할 때 부담이 덜해집니다.

유형설정 삼

TypeSettings 는 적절한 글꼴 크기, 세로 리듬 및 타이포그래피의 반응 비율을 정의하기 위한 CSS 규칙 집합 모음입니다. TypeSettings는 변수를 조정하여 프로젝트 요구 사항을 충족할 수 있는 유연성을 허용하는 Sass 및 Stylus로 제공됩니다.

활판 4

Typeplate 은 아마도 타이포그래피 설정을 위한 가장 완벽한 스타터 키트 중 하나일 것입니다. Typeplate은 크기 조정, 색상, 작은 대문자, 단락 대문자, 들여쓰기, 하이픈 넣기, 인용 부호, 코드 블록 및 더 많은 항목을 처리하는 소수의 기본 타이포그래피 스타일과 함께 제공됩니다.