내재 타이포그래피는 웹 스타일링 텍스트의 미래입니다.

우리 스타일의 텍스트 방식은 수년 동안 크게 변하지 않았습니다. 레이아웃과 같이 물건을보다 유연하게 만드는 데 도움이되는 많은 발전이 있었지만 스타일링 측면에서 텍스트와 같은 디자인의 대부분의 유한 한 측면은 비교적 변하지 않습니다. 이것은 특히 텍스트 스타일에 해당됩니다. 우리는 레이아웃의 모든 부분에 대해 명시 적으로 스타일 텍스트에 대한 코드를 작성한 다음, 응답하기 위해 모든 중단 점에서 작동하도록 더 많은 코드를 작성합니다. 이것은 텍스트의 다른 영역이 압축되고 확장됨에 따라 결과는 내용이 파손되기 직전에 긴장 (눈에 띄는 경험, 경험적 장력)이 있음을 의미합니다. 이 장소에서 콘텐츠는 크기 나 간격이 잘되지 않으며 지나치게 복잡하고 부서지기 쉬운 코드로 지원됩니다.

본질적인 타이포그래피는 이 모든 것을 변화시켜 코드 자체에서 시작하여 스타일에 영향을 미쳐 지우십시오. 명백한 텍스트 스타일을 작성하는 대신 해당 스타일이 텍스트 영역에 비례하여 어떻게 변하는 지 정의합니다. 이를 통해 더 많은 레이아웃 변형에서보다 유연한 텍스트 구성 요소를 사용할 수 있습니다. 코드를 단순화하여 새로운 레이아웃 가능성에 대한 기회가 높아집니다. 본질적인 타이포그래피는 텍스트가 렌더링 된 영역에 자체 조정되도록 작동합니다. 모든 중단 점에서 각 구성 요소의 크기 및 간격 텍스트 대신 텍스트에는 배치 된 영역에 응답하는 지침이 제공됩니다. 결과적으로, 고유 타이포그래피를 사용하면 디자인이 훨씬 더 유연하게 만들어지면서 훨씬 적은 코드로 배치 된 영역에 적응할 수 있습니다.

클램프 () 이상의 타이포그래피 초강대국

고유 타이포그래피를 사용한 결과는 clamp ()와 같은 도구를 사용하여 가능한 것 이상으로갑니다. 본질적인 타이포그래피 스타일링은 CSS 애니메이션의 보간 제어와 요소 쿼리의 구성 요소 휴대 성을 혼합하여 컨테이너 폭에 걸쳐 모든 값의 완벽한 변화를 가능하게합니다. 이 기술은 요소의 영역이 변경 될 때 변수 글꼴 설정, 색상 및 단위가없는 라인 높이를 유동적으로 조정하는 것과 같은 다른 CSS 기술에서는 불가능한 것을 가능하게합니다. 또한 Clamp ()의 접근성 함정을 피하고 브라우저의 기본 글꼴 크기를 변경하면 상대 장치를 사용할 때 타이포그래피가 중단 점을 정렬하지 못하게합니다.

반응 형 타이포그래피와 어떻게 다른가요?

반응 형 타이포그래피는 뷰포트를 참조하여 텍스트를 변환합니다. 미디어 쿼리, 클램프 () 또는 CSS 잠금을 통해이를 수행합니다. 이러한 기술은 화면 크기에 걸쳐 타이포그래피를 세분화 할 수 있지만 다른 구성 요소에서 타이포그래피를 제어 할 수있는 능력이 부족합니다. 즉, 다양한 크기의 컨텐츠 영역이있는 페이지의 경우 반응 형 타이포그래피 접근 방식을 사용하여 이러한 각 영역에 대해 새로운 헤드 라인 스타일을 만들어야합니다.

본질적인 타이포그래피에는 모든 것이 필요하지 않습니다. 고유 타이포그래피를 사용하면 모든 콘텐츠 영역에서 단일 헤드 라인 스타일을 사용할 수 있습니다. 불연속 헤드 라인 스타일은 하나의 고유 헤드 라인으로 통합 될 수 있습니다. 이는 요소 쿼리 대 미디어 쿼리와 유사한 차이점입니다. 요소 쿼리를 사용하면 모든 스케일링 정보를 구성 요소에 바인딩 할 수 있습니다. 여기서 미디어 쿼리는 스타일이 항상 뷰포트를 참조합니다.

본질적인 스타일의 해부학

우리가 위의 고유 헤드 라인 스타일을 가져 와서 그 안에있는 모든 변형을 발행한다면 다음과 같습니다.

페이지의 넓은 영역 내에서 텍스트는 조심자가 더 크고 대담하며 넓습니다. 페이지의 작은 영역에서는 텍스트가 작고 가벼우 며 좁습니다. 헤드 라인이 렌더링되는 영역을 측정 한 다음 해당 특정 헤드 라인에 사용될이 고유 헤드 라인 스타일에서 적절한 슬라이스를 가져옵니다.

이 압출 헤드 라인 스타일의 모양에 대해 몇 가지 사항을 알 수 있습니다. 텍스트는 더 작아서 더 크지 만 모양 자체에는 곡선이 있습니다. 텍스트 스케일이 한 지점에서 다른 지점으로 어떻게 스케일링되는지에 대한 제어는 최적의 가독성을 보장하기 위해 화면이 작아지면 특히 유용합니다. 아래에는 동일한 스타일 세트가 두 개의 텍스트 열에 적용되는 것을 볼 수 있습니다. 하나는 구부러진 모양이 있고 하나는 선형 모양입니다. 구부러진 고유 예제에서 텍스트는 선형 보간을 사용한 예제와 비교하여 텍스트가 너무 빨리 작아집니다.

레이아웃의 크기와 영역에 걸쳐 텍스트 스타일을 보간하는 기능을 결합하고 해당 설정이 보간되는 방식을 형성하면서, 고유 타이포그래피는 디자이너에게 텍스트가 모든 화면 또는 구성 요소 크기에서 어떻게 렌더링되는지에 대한 전례없는 양의 제어를 제공합니다.

본질적으로 조판

Typetura는 CSS에 고유의 조판 기능을 추가하는 도구를 개발했습니다. 본질 스타일은 CSS 키 프레임에 저장되며 부모 요소의 너비에 따라 변경됩니다. 이를 통해 요소 폭에 걸쳐 애니메이션 가능한 속성을 보간 할 수 있습니다. 요소 쿼리 예제를 다시 참조하려면 보간 요소 쿼리를 생각해보십시오.

키 프레임을 설정하려면 0%가 컨테이너 너비 0px와 같으며 키 프레임 100%는 스타일이 다루는 최대 컨테이너 너비입니다. 이 값은 기본적으로 1600px입니다. 컨테이너는 루트 요소를 기본 컨테이너로 사용하는 요소에 클래스 타이피 투라를 추가하여 정의 할 수 있습니다. 자식 요소는 새로운 컨텍스트가 정의되지 않는 한 부모 상황의 너비에 따라 스타일을 지정합니다.

 @keyframes 헤드 라인 {
  0% {
    글꼴 크기 : 1REM;
  }
  100% {
    글꼴 크기 : 4rem;
  }
}

이러한 스타일을 요소에 첨부하려면 사용자 정의 속성 (TT-Key)을 사용하십시오. 이제 첫 번째 고유 스타일을 볼 수 있습니다.

 @keyframes 헤드 라인 {
  0% {
    글꼴 크기 : 1REM;
    라인 높이 : 1.1;
  }
  100% {
    글꼴 크기 : 4rem;
    선-높이 : 1;
  }
}

.headline {
  -TT-Key : 헤드 라인;
}

이러한 스타일의 규모를 형성하려면 사용자 정의 속성 (TT-Ease)을 사용하십시오. 이 속성은 CSS 완화 기능 및 키워드를 허용합니다. 이를 통해 기본 글꼴 크기를 신속하게 제기하거나 헤드 라인 스케일링 및 간격을 테이퍼 할 수 있습니다. 또한 레이아웃의 제약 조건과 텍스트가 사용되는 내용에 더 잘 맞도록-TT-MAX 로이 스타일 커버 범위를 제한 할 수 있습니다.

 @keyframes 헤드 라인 {
  0% {
    글꼴 크기 : 1REM;
    라인 높이 : 1.1;
  }
  100% {
    글꼴 크기 : 4rem;
    선-높이 : 1;
  }
}

.headline {
  -TT-Key : 헤드 라인;
  --tt-max : 600;
  -tt-ease : 편안함;
}

다음 예는 모든 텍스트가 고유 인쇄 스타일에 의해 구동 될 때 페이지가 얼마나 유연 할 수 있는지 보여줍니다. 문서의 루트에서. 텍스트는 모니터에서 회의실을 제공하는 모니터에서 모든 미디어 쿼리없이 시계 크기로 완벽하게 전환 할 수 있습니다. 텍스트 스타일은 다른 모듈에서도 공유 할 수 있습니다. 예를 들어, 페이지 상단의 헤드 라인과 다음 클릭 영역의 헤드 라인은 모두 같은 스타일로 구동됩니다. 효율성은 웹 사이트의 모든 규모에 즉시 나타나지 만 빠르게 복합적으로 복잡합니다. 사이트가 클수록 더 많은 효율성이 구축됩니다.

이 펜을 확인하십시오. 그것에, 나는 본질적인 스타일 검사관을 추가하여 각 헤드 라인을 클릭하고 렌더링 된 크기가 무엇인지 확인할 수 있습니다. 검사관 내에서는 고유 스타일의 모양과 상한 경계를 조작 할 수도 있습니다. 이를 통해 Typetura가 활성화 할 수있는 타이포그래피 스타일 가능성을 볼 수 있습니다.

내재 타이포그래피는 웹 스타일의 미래입니다.

이러한 디자인 규칙을 컨텐츠에 베이킹하는 것은 본질적인 디자인의 관행이며, 이러한 규칙을 텍스트에 베이킹하는 것입니다. Jen Simmons에 의해 만들어진 고유 한 웹 디자인은 일반적인 디자인 돌연변이가 우리 구성 요소의 직물에 구워지는 개념입니다. 각 개별 컨텐츠의 스타일을 명시 적으로 명시하는 대신, 본질적인 레이아웃이 설계 제약 조건을 제공하고 스타일을 명시 적으로 정의하는 것과는 대조적으로 우리의 컨텐츠는 환경에 반응합니다. 이 접근법은 코드베이스를 단순화하고 디자인의 유연성을 향상시킵니다. 구성 요소에는 단순한 뷰포트 이상에 응답하는 데 도움이되는 지침이 있기 때문입니다.

Typetura는이 철학을 텍스트 스타일로 제공합니다. 텍스트 구성 요소가 가장 기본적인 디자인 자료 인 거의 모든 구성 요소에서 재사용되는 재료 인 고유 타이포그래피는 다른 방법론에 비해 상당한 장점이 있습니다. 설계 탄력성, 확장 성 및 코드 단순화의 장점은 프로젝트에 더 깊이 존재하며 수명을 연장합니다. 시계의 크기 또는 TV 크기까지 확장하고, 텍스트가 한 번에 레이아웃에 도달 할 수있는 시간을 제한하는 경우, 이제 야망을 지원합니다.

위 내용은 내재 타이포그래피는 웹 스타일링 텍스트의 미래입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!