환상적인 jQuery 웹 유형 플러그인 20 개
최근 몇 년 동안 웹 타이포그래피는 당혹 스러움에서 자부심으로 바뀌 었습니다. CSS에서 JavaScript에 이르기까지 거의 매일 멋진 유형을 구현하는 데 도움이되는 훌륭한 도구를 얻고 있습니다.
오늘 우리는 웹 유형을 더 멋지게 만들기 위해 특별히 제작 된 최고의 jQuery 플러그인을 살펴볼 것입니다. 몇 개를 다운로드하여 더 많이 입력하십시오.
디자인 리소스 살펴보기
표기법 조작
FitText – 웹 유형 팽창을위한 플러그인
FitText를 사용하면 텍스트를 부모 컨테이너의 크기로 쉽고 자동으로 늘릴 수 있습니다.
HATCHSHOW : 측정 값 균형 조정을위한 jQuery 플러그인
해치 쇼 (Hatchshow)를 통해 균일 한 측정 단위로 텍스트 열을 만들 수 있으므로 텍스트 크기가 변하고 텍스트 크기가 다양하게 느껴집니다 (실제로 인기있는 효과).
slabText – 반응 형 헤드 라인을 만들기위한 jQuery 플러그인
또 다른 플러그인은 별도의 라인에 대한 측정을 정렬합니다. 이것에 대한 좋은 점은 뷰포트의 크기를 조정할 때 선이 정말 잘 리플 로우된다는 것입니다.
반응 형 측정
이 플러그인은 창의적인 헤드 라인을 만드는 것이 아니라 유형에 대한 몇 가지 변수를 고려하여 단락에 대한 이상적인 반응 형 측정 값을 생성합니다. 반응 형 디자인에서 유형을 읽기 쉽게 유지하는 데 좋습니다.
BigText
BigText는 한 줄의 텍스트를 특정 너비에 일치시키는 데 필요한 글꼴 크기 및 단어 간격을 계산합니다. 여기에는 멋진 마법사가 있습니다.
커닝
Kerning.js
이것은 정확히 다음과 같이 들립니다. 웹 유형을 보호하는 데 도움이됩니다. 웹 디자이너는 일반적으로 커닝을 생략합니다. 복잡하고 복잡하기 때문에 프로세스가 쉬워집니다.
TypeButter : 광학 커닝 FTW!
TypeButter를 사용하면 각 문자에 대한 커닝을 수동으로 조정하는 대신 작업을 수행하는 광학 커닝을 설정할 수 있습니다. 제공된 글꼴 설정 중 하나를 사용하거나 직접 설정할 수 있습니다.
jKerny.js, 커닝을 쉽게 만드는 jQuery 플러그인
jKerny는 문자 간격, 단어 간격, 첫 글자, 마지막 글자 등을위한 새로운 CSS 의사 선택기를 구현합니다.
외장
베이컨
텍스트 줄 바꿈. 베이컨을 사용하면 베 지어 곡선 또는 선 주위에 텍스트를 줄 바꿈 할 수 있습니다. 실제로 꽤 인상적이며 정말 복잡한 랩을 만들 수 있습니다.
jQSlickWrap – jQuery를위한 매끄러운 텍스트 줄 바꿈
JQSlickWrap을 사용하면 아무리 복잡해도 이미지를 텍스트로 감쌀 수 있습니다. 몇 가지 설정 만 조정하면 나머지는 자동으로 처리됩니다.
수직 리듬 및베이스 라인 그리드
jMetronome : jQuery를 사용하여 활자체 리듬 유지
이 스크립트를 사용하면 텍스트가 아닌 다양한 요소에 패딩을 추가하여 전체 높이가 문서의 전체 줄 높이의 배수가되도록 타이포그래피의 세로 리듬을 유지할 수 있습니다.
SimonFairbairn / 인라인 타이포그래피
이 플러그인은 테마의 선 높이를 기준으로 선을 표시하므로 수직 리듬을 올바르게 설정하고 모든 타이포그래피를 기준선 격자에 맞출 수 있습니다.
자동 줄 높이 : 유연한 레이아웃을위한 jQuery 플러그인
자동 줄 높이는 글꼴 크기를 기준으로 너비에 비례하여 컨테이너 (예 : div)의 줄 높이를 조정합니다. 반응 형을 돕는 또 다른 훌륭한 도구입니다.
슈퍼 실용
Lettering.js – 급진적 인 웹 타이포그래피를위한 jQuery 플러그인
Lettering.js는 CSS가하지 않는 것을 제공합니다. 모든 단일 문자를 개별적으로 타겟팅 할 수있는 자유입니다. 이것은 문자별로 창조적 인 스타일링을위한 모든 종류의 놀라운 가능성을 열어줍니다.
KarlRoos / jQuery.responsiveText
반응 형 텍스트를 플러그 앤 플레이하십시오. 컨테이너 또는 전체 페이지를 타겟팅하면 나머지는 스크립트가 수행합니다!
시원하고 미친 효과
jqIsoText : jQuery 텍스트 효과 플러그인
독창적 인 효과를 내기 위해 개별 글자의 크기를 조작하는 기발한 텍스트 플러그인.
Arctext.js – CSS3 및 jQuery로 텍스트 커브
라이브 웹 유형으로 작업 할 때는 곡선의 텍스트를 만드는 것이 매우 어렵습니다. 이 플러그인을 사용하면 훨씬 쉽게 만들 수 있으며 변경 사항에 애니메이션을 적용 할 수도 있습니다.
문자 분석기
Textualizer는 한 단락에서 다른 단락으로 창의적으로 전환합니다. 전환은주의를 끌기 위해 뒤죽박죽이 된 혼합 효과입니다.
문자 셔플 효과 : jQuery 플러그인
이 플러그인은 입력 한 텍스트에 착륙하기 전에 임의의 임의 문자를 순환하는 애니메이션을 제공합니다. 헤드 라인을 소개하는 멋지고 흥미로운 방법입니다.
TextGrad
TextGrad는 그라디언트를 만들어 한 줄의 텍스트로 확장합니다. 간단하고 효과적입니다!
내가 놓친 게 무엇입니까?
이 20 개의 jQuery 플러그인은 내가 찾을 수있는 최고의 타이포그래피 도구를 나타냅니다. 나는 거기에 더 많은 톤이 있다고 확신하므로 아래에 의견을 남기고 내가 놓친 것을 알려주십시오!
