Arcade Game Typography의 저자인 Toshi Omagari에 따르면 최초의 다색 디지털 글꼴 Insector라는 미공개 비디오 게임을 위해 1982년에 만들어졌습니다. 여러 색상 글꼴(때로는 호출됨) 반음계, 웹에서는 여전히 상대적으로 드뭅니다. COLR 글꼴 형식 2018년부터 브라우저 간 지원이 완벽하게 이루어졌습니다(Internet Explorer에서도!).

이 기술은 타이포그래피 창의성의 완전히 새로운 영역을 열어줍니다. 내가 본 컬러 글꼴 중 일부는 촌스러웠지만 기껏해야 반음계 글꼴은 재미있고 혁신적이며 주의를 끌었습니다. 다음을 포함하여 새로운 CSS 기능이 추가되었습니다. font-palette 재산 및 @font-palette-values 규칙 — 컬러 글꼴의 색상 팔레트와 COLR 글꼴 형식의 진화를 제어하려면 현대 웹 타이포그래피가 무엇을 할 수 있는지 자세히 살펴보고 실험할 좋은 시간입니다.

COLR 지원

나는 마지막 색상 글꼴에 대해 썼습니다. 2018년. 당시에는 네 가지 다른 표준 여러 색상 서체의 경우: OpenType-SVG, COLR, SBIX 및 CBDT/CBLC. 당신이 사용할 수있는 크로마체크 자신의 브라우저가 지원하는 색상 글꼴 형식을 확인하십시오.

Google 크롬에는 OpenType-SVG를 "wontfix"로 표시 즉, Chrome 또는 Edge에서 해당 형식을 지원하지 않습니다. SBIX 및 CBDT/CBLC는 모두 래스터 이미지를 기반으로 하고 더 큰 글꼴 크기에서 흐려지기 때문에 웹에서 사용하기 위해 대부분 무시할 수 있습니다. 비트맵 기반 글꼴의 큰 파일 크기는 웹용으로도 적합하지 않습니다.

울리케 라우쉬 창조자 리에베하이데, 볼펜 모양을 기이하게 복제하는 비트맵 색상 글꼴입니다. "제 가장 큰 목표는 항상 손으로 쓴 텍스트를 가능한 한 사실적으로 재현하는 것이었습니다."라고 그녀는 말했습니다. “LiebeHeide의 경우 마침내 글꼴로 이러한 수제 속성을 시뮬레이션할 수 있었습니다. 단점? 글꼴 파일의 모든 PNG 이미지가 합쳐져 ​​엄청난 OTF 파일 크기가 됩니다. Adobe InDesign과 같은 데스크톱 응용 프로그램에서는 문제가 되지 않을 수 있지만 웹에서 사용하려면 글꼴을 거의 적용할 수 없습니다.”

모든 브라우저는 COLR 글꼴(현재 일반적으로 COLRv0이라고 함)을 지원합니다. 98월에 출시된 Chrome(및 Edge) 버전 1에는 형식의 진화인 COLRvXNUMX에 대한 지원이 추가되었습니다.

COLRv0 및 COLRv1

COLRv1은 오픈타입 1.9 표준. 초기 COLRv0에는 OpenType-SVG의 창의적인 가능성이 많이 부족했지만 COLRv1은 특정 단점을 피하면서 이러한 가능성을 일치시킵니다. 예를 들어, COLRv0은 단색만 수행할 수 있는 반면 COLRv1은 수행할 수 있습니다. 선형, 방사형, 원뿔형 그라디언트. 형식도 추가합니다. 합성 및 블렌딩 파일 크기를 줄이기 위해 모양을 재사용할 수 있습니다.

타이포그래피 전문가 로엘 니스킨스 "저는 OpenType-SVG 형식이 가장 다양한 기능을 제공하는 최고의 형식이라고 말하곤 했습니다. 이것이 텍스트 렌더링과 같은 하위 수준 작업에 너무 복잡하다는 것을 깨달았을 때까지입니다. 글꼴 렌더링 수준에서 SVG의 기본 하위 집합을 구현합니다. 그러나 다른 글꼴 기술(힌팅, 가변 축 등)에서는 잘 작동하지 않으며 구현하기가 어렵습니다. 그래서 COLR로 방향을 바꿨습니다. COLR은 기본적으로 OpenType 글꼴이 이미 가지고 있는 모든 것을 재사용합니다. '만' 레이어링을 추가하고 각 레이어의 색상을 변경할 수 있습니다. 간단하지만 효과적인."

COLRv1은 가변 글꼴 축과 완전히 호환되며 다음과 같은 가변 COLR 글꼴의 예가 이미 있습니다. 공로 배지, 플라카토 컬러 과 로쉐 컬러.

다음은 네온 사인의 모양을 디지털 방식으로 재창조하는 (현재 출시되지 않은) 서체인 Ulrike Rausch의 놀라운 예입니다.

유형 주조 공장의 Akiem Helmling 언더웨어 는 COLRv1에 매료되어 "COLRv1 형식은 잠재적으로 최근 몇 년 동안 가변 글꼴과 유사한(또는 훨씬 더 큰) 글꼴 디자인에 영향을 미칠 수 있습니다."라고 말했습니다. Akiem의 경우 의심할 여지 없이 우수한 형식입니다. “이전의 모든 색상 형식은 글리프에 색상을 추가하기 위한 잘못된 해킹이었습니다. 일부 사람들은 OpenType-SVG를 좋은 솔루션으로 간주하지만 내 관점에서는 전혀 그렇지 않습니다. 실용적인 관점에서 SVG는 OpenType의 개방형 구조 내에서 '밀폐된 방'입니다. 데이터를 재사용하거나 연결하거나 다른 글꼴 테이블과 SVG 테이블을 연결하는 방법은 없습니다. 이 때문에 가변 SVG 데이터로 가변 글꼴을 만들 수 없습니다.”

아직 형식은 초기 단계입니다. Mozilla는 아직 COLRv1을 출시하지 않았지만 긍정적인 입장 형식에 대해 "웹 사용에서 OpenType-SVG 글꼴을 대체할 가능성"이 있다고 명시했습니다. Apple은 Safari에서 이를 구현하는 것을 꺼립니다.

COLRv1 글꼴은 여전히 ​​이러한 브라우저에서 표시되고 읽을 수 있지만 모든 문자는 단일 단색입니다(CSS로 설정할 수 있음 color 속성, 일반 글꼴과 마찬가지로). 우리는 아직 많은 유형 파운드리가 COLRv1 서체를 출시하는 것을 보지 못했고 Figma와 같은 일부 인기 있는 디자인 도구는 COLRv0을 지원하지도 않지만 웹에서 컬러 타이포그래피의 미래가 될 것이라고 믿습니다. COLRv1이 등장한 짧은 시간 동안 기술이 무엇을 할 수 있는지에 대한 몇 가지 아름다운 예가 이미 있었습니다. 림 쿠피 과 브래들리 이니셜.

COLR 및 CSS

색상 글꼴을 사용하는 경우 색상을 제어할 수 있기를 원할 것입니다. 지금까지 CSS로는 불가능했습니다. 그만큼 font-palette 속성은 서체의 기본 색 구성표를 무시하고 고유한 색 구성표를 적용할 수 있는 기능을 제공합니다. 이 속성은 COLRv0 및 COLRv1 서체에서 작동합니다. (애플의 마일스 맥스필드 SVG 글꼴이 옵트 팔레트를 사용하는 반면 COLR 서체의 모든 색상은 자동적으로 CSS에 의해 재정의됩니다.)

적절한 색상 팔레트를 만드는 것은 훌륭한 예술입니다. 일부 유형 디자이너는 우리를 위해 열심히 일했고 글꼴 내부에 대체 팔레트를 포함했습니다. 다음을 사용하여 다양한 색상 구성표 중에서 선택할 수 있습니다. base-palette CSS에서.

글꼴이 대체 팔레트를 제공하는지 어떻게 알 수 있습니까? 글꼴 사이트에서 알려줄 수 있습니다. 그렇지 않은 경우 라는 편리한 도구가 있습니다. 와카마이 퐁듀 사용 가능한 모든 색 구성표가 나열됩니다(아래 이미지 참조). 이 예에서는 로쉐 컬러, Flintstones 분위기의 Henrique Beier의 무료 가변 색상 글꼴입니다. Wakamai Foundue를 보면 이 서체가 XNUMX가지 색상을 사용하고 XNUMX가지 다른 팔레트 옵션이 제공된다는 것을 알 수 있습니다.

사용 base-palette: 0 기본 색상 팔레트를 선택합니다(Rocher의 경우 주황색과 갈색 음영).

사용 base-palette: 1 서체 작성자가 정의한 첫 번째 대체 팔레트를 선택하는 식입니다. 다음 코드 예제에서는 회색 음영이 다른 색상표를 선택합니다.

 @font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}

CSS가 있는 팔레트를 선택했으면 @font-palette-values 규칙을 사용하여 적용할 수 있습니다. font-palette 재산:

.grays {
  font-family: 'Rocher';
  font-palette: --Grays;
}

물론 자신의 브랜드 컬러와 어울리거나 나만의 디자인 감성에 맞는 팔레트를 만나보세요. 모든 색상을 재정의하려는 경우 다음을 지정할 필요가 없습니다. base-palette.

해 보자 번지 선구적인 활자 디자이너로부터 데이비드 조나단 로스 예로서. 기본적으로 빨간색과 흰색의 두 가지 색상만 사용합니다. 다음 예에서는 글꼴의 두 색상을 모두 재정의하므로 base-palette 중요하지 않으며 생략됩니다.

 @font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values --GrayAndPink {
  font-family: bungee;
  override-colors:
    0 #ff3a92,
    1 #c1cbed;
}

또는 base-palette 시작점으로 일부 색상만 선택적으로 변경합니다. 아래에서는 Rocher의 회색 색상 팔레트를 사용하고 있지만 한 색상을 민트 그린으로 재정의합니다.

@font-palette-values --GraysRemix {
  font-family: Rocher;
  base-palette: 9;
  override-colors:
    2 rgb(90,290,210);
}

body {
  font-family: "Rocher";
  font-palette: --GraysRemix;
}

지정할 때 override-colors 글꼴의 어느 비트가 어떤 숫자로 재정의될지 알기 어렵습니다. 시행착오를 통해 원하는 효과를 얻으려면 놀고 실험해야 합니다.

원하는 경우 다음과 같은 이모티콘 글꼴의 색상을 변경할 수도 있습니다. 트위모지 (아래 참조) 또는 Noto. 여기 재미있는 데모 Google의 글꼴 엔지니어로부터.

현재 제한 사항

한 가지 유감스러운 제한은 적어도 당분간은 CSS 사용자 정의 속성이 다음에서 작동하지 않는다는 것입니다. @font-palette-values. 이는 다음이 유효하지 않음을 의미합니다.

@font-palette-values --PinkAndBlue {
  font-family: bungee;
  override-colors:
    0 var(--pink),
    1 var(--blue);
}

또 다른 제한 사항: 하나의 애니메이션 및 전환 font-palette 다른 팔레트로 보간하지 마십시오. 즉, 한 팔레트에서 다른 팔레트로 즉시 전환할 수 있지만 점차적으로 팔레트 간에 애니메이션을 적용할 수는 없습니다. 요란하게 움직이는 이모티콘 글꼴에 대한 내 꿈은 슬프게도 실현되지 않았습니다.

브라우저 지원

font-palette 과 @font-palette-values 버전 15.4부터 Safari에서 지원되었으며 크롬과 엣지 버전 101의 릴리스와 함께.

사용 사례

자신의 프로젝트에서 색상 글꼴을 사용하는 방법을 이미 상상할 수 있습니다. 그러나 언급할 가치가 있는 몇 가지 특정 사용 사례가 있습니다.

COLR 및 아이콘 글꼴

아이콘 글꼴은 더 ​​이상 웹에서 아이콘을 표시하는 가장 인기 있는 방법이 아닐 수 있습니다(크리스가 이유를 설명한다) 그러나 여전히 널리 사용됩니다. FontAwesome의 Duotone이나 다음의 투톤 아이콘과 같이 여러 색상의 아이콘 글꼴을 사용하는 경우 소재 디자인, font-palette 사용자 정의를 위한 더 쉬운 방법을 제공할 수 있습니다.

이모티콘 문제 해결

놀란 로슨은 최근에 웹에서 이모티콘 사용 문제. 그만큼 크롬 개발자 블로그 다소 복잡한 현재 솔루션을 설명합니다.

사용자 생성 콘텐츠를 지원하는 경우 사용자는 이모티콘을 사용할 것입니다. 오늘날에는 일관된 크로스 플랫폼 렌더링과 OS가 지원하는 것보다 새로운 이모티콘을 지원하는 기능을 보장하기 위해 텍스트를 스캔하고 이미지와 마주하는 모든 이모티콘을 교체하는 것이 매우 일반적입니다. 그런 다음 클립보드 작업 중에 해당 이미지를 텍스트로 다시 전환해야 합니다.

더 많은 브라우저 지원을 받으면 COLRv1 이모티콘 글꼴이 훨씬 더 간단한 접근 방식을 제공합니다. COLRv1은 또한 모든 크기에서 선명하게 보이는 이점이 있는 반면 기본 브라우저 이모티콘은 더 큰 글꼴 크기에서 흐릿하고 픽셀화됩니다.

최대 포장

컬러 글꼴 이전에는 웹에서의 타이포그래피 창의성이 CSS로 획이나 그라디언트 채우기를 적용하는 것으로 제한되었습니다. 벡터 이미지를 사용하여 항상 더 사용자 정의할 수 있는 작업을 수행할 수 있지만 이는 실제 텍스트가 아닙니다. 사용자가 선택하거나 클립보드에 복사할 수 없으며 다음을 사용하여 페이지에서 검색할 수 없습니다. 명령+F, 스크린 리더나 검색 엔진에서 읽지 않으며 복사본을 편집하려면 Adobe Illustrator를 열어야 합니다.

컬러 글꼴은 사용자의 관심을 끌 수 있어 방문 페이지와 배너에 적합합니다. 그것들은 당신이 자주 접근하는 것이 아닐 수도 있지만, 당신의 사이트를 돋보이게 할 수 있는 웹 디자인을 위한 새롭고 표현적이고 창의적인 가능성을 약속합니다.