2022年のモリサワ新書体のリリースで、TypeSquareで使える欧文フォントが49ファミリー504書体と多数追加されました。
今回は、そんな欧文フォントをより活用してもらうための機能や設定方法をご紹介します！

①和欧混植とは

和文（日本語）書体と欧文（英数字）書体を混在させることを言います。それぞれに適した書体を使うことで、美しい見栄えにすることが目的です。

CSSでの書体指定は以下のように、「’欧文書体’, ‘漢字書体’」と記述するとうまく表示されます。

h1 {
font-family: 'Letras Oldstyle Pro', ' A1明朝';
}

h1 {

font-family: 'Letras Oldstyle Pro', ' A1明朝';

}

A1明朝＋Letras Oldstyle Pro
進化する言葉のDesignとTypography

A1ゴシック＋Rocio Pro
進化する言葉のDesignとTypography

フォーク＋Cetra Display Pro
進化する言葉のDesignとTypography

②欧文合字（リガチャ）とは

複数の文字を組み合わせて、1文字として表記する文字のことをいいます。

欧文では、「f」と「i」や「f」と「l」が隣合ったときに、文字同士の重なりが不自然になり、可読性が損なわれてしまうことがあります。

これを解消するために、欧文合字（リガチャ）があります。
以下の5つについては、ほとんどの書体で合字のグリフが用意されています。

リガチャを有効にするには、以下のように書きます。

.ligature {
　font-variant-ligatures: common-ligatures;
}

.ligature {

　font-variant-ligatures: common-ligatures;

}

リガチャ未設定　　 Office off finance flower affluent

リガチャ設定　　 Office off finance flower affluent

使用書体：Role Serif Text Pro Regular

標準の字形とは別のデザインバリエーションとして含まれた字形です。
書体によっては多数のデザインを搭載したものもあります。

スワッシュ未設定　　 happy

スワッシュ設定　　 happy

.swash {
font-feature-settings: "swsh" 1;
}

.swash {

font-feature-settings: "swsh" 1;

}

Tokyo Rose Garden With great views of the roses and the skyline, the Tokyo Rose garden is a must-see.

使用書体：Rocio Pro Italic

※使用する書体に複数のスワッシュ字形がある場合、「”swsh” 1」の数字部分を変えることで、他のデザインを指定することができます。

いかがでしたでしょうか。
今後も欧文書体のラインナップは増えますので、ぜひWebサイト制作にご活用ください！