TypeSquare Blog編集部

100種類以上のWebフォントを試したサイトの担当者が本音で語る実際の使用感

文字による文字のための文字のサイト「type.center」は、文字に関するあらゆる情報が網羅されたウェブメディアで、サイトではこれまで100種類を超えるWebフォントが使われてきました。 実際に国内外のWebフォントを利用した感想や、そこから見えてきた可能性について、2016年5月30日に渋谷ヒカリエで行われた「BOHR(ボーア)フェスティバル ~文字のデザインから見るWebの未来~」 で講演されたスライドが公開されています。タイプ・センター管理組合の花村さんと萩原さんが注目するWebフォントへの期待とは?ぜひご覧ください。   関連リンク:type.center


「文字詰め」の使い方

見出しなどで、「文字と文字の間が空きすぎている」と感じたことはありませんか? 「文字詰め」機能を利用することで、一文字ずつ調整することなく適切な字間調整が可能となり、より引き締まった印象を与えることができます。CSS の標準的な機能を利用するもので、簡単に導入いただけます。 導入方法 「font-feature-settings」を利用します。 CSS中でfont-familyを記述している箇所に、以下の記述を追加します。 [crayon-592d1e9e87da3624384295/] この 'palt' は「プロポーショナルの文字幅(プロポーショナルメトリクス)」を適用するためのキーワード(フィーチャータグ)です。 フィーチャータグを指定することで、かなや約物など全角幅でデザインされた文字が、固有の適切な字幅で前後の文字と詰まって表示されるようになります。 'palt' 以外に利用可能なフィーチャータグとして 'halt' があり、こちらは主に約物類を半角幅に調整します(字幅半角メトリクス)。 プロポーショナルメトリクスの例(上:設定なし、下:'palt'を適用) 字幅半角メトリクスの例(上:設定なし、下:'halt'を適用) 文字詰めに関する情報は、当社フォント製品「MORISAWA PASSPORT」などに収録されているフォントと同一ですので、手元の制作環境にあるデスクトップフォントを利用して、文字間の詰まり具合を確認することもできます(これらの詰め情報は、OpenTypeの仕様で定義されたものです)。 対応書体 モリサワ:日本語515書体(※) SCREEN GP:日本語40書体 ※ 陸隷では、半角の約物調整のみご利用いただけます。 ※ 対応フォントは順次拡張していきます。 サポートブラウザ環境 Internet Explorer 10以降 OSX10.11 以降の Safari 9.1以降(※制限あり) Firefox 15.0以降(Firefox 34.0 未満の場合は、prefixに-moz-が必要) Chrome 21.0以降(Chrome 48.0 未満の場合は、prefixに-webkit-が必要) Microsoft Edge スマートデバイス環境: iOS 9.3.3以降のSafari(※制限あり) Android 4.4以降のAndroidブラウザ(Android 4.4の場合は、prefixに-webkit-が必要) (2016年8月22日現在) 上記ブラウザで現在確認されている制限事項や注意事項は次の通りです。 Safari では、行頭の印字開始位置が調整されません。また、複数のフィーチャータグを指定すると、設定が解除されることがあります。 canvas への描画は、ブラウザによるサポートが不十分なため、多くの場合 font-feature-settings が適用されません。font-feature-settings を @font-face 内に記述する(Firefox)、font-feature-settings を設定したエレメント内に canvas を配置する(Safari / Chrome)、など、一部のブラウザでは適用されることがあります。 font-feature-settingsでは、仕様上さまざまなフィーチャータグを指定することができますが、現時点でサポートしているものは文字の位置調整に関わる値のみです。縦組み用フィーチャータグは、Chrome 以外のブラウザでは期待した動作となりません。各種字形置換に関するサポートは、今後対応予定です。   TypeSquareのフォント一覧を見る


モリサワコーポレートサイトでWebフォントを全面採用

2015年10月1日にリニューアルを行ったモリサワのコーポレートサイト。 映像や写真とともにサイトに彩りを添えているのがTypeSquareから配信されるWebフォントです。 サイトではすべてのページでWebフォントを採用し、できる限りテキストを画像化することなく設計しています。運用面では、見出しなどに修正があった場合でも、ページのテンプレートにあらかじめWebフォントが指定されており、テキストを修正するだけで書体が適用されます。 また、キービジュアルや動きのある演出を加えた部分では、SVG画像を用いています。これは、解像度の高い閲覧環境でも、Webフォントともに全体の美しさを保つための工夫のひとつです。 基本の書体として、見出しには力強さと信頼感を備えた「ゴシックMB101」を、本文には可読性を重視した「UD新ゴNT」を採用しています。さらに、レスポンシブデザインへの対応の一環として、画面幅が狭まった際には、本文のテキストを通常より文字幅の狭い「UD新ゴ コンデンス」に変更し、スムーズな閲覧に貢献しています。 書体見本のページではWebフォントを活用した試し打ちもできます。 Webフォントともに新しくなったモリサワのコーポレートサイト、ぜひご覧ください。 (サカモト)


新書体レビュー:「すずむし」(2014)

新たに配信を開始した書体をご紹介するこちらのコーナー「新書体レビュー」。 記念すべき第1回目は2014年リリースの すずむし です! この「すずむし」は、一般公募から生まれた書体ということをご存知でしょうか? 2012年に開催された書体のコンテスト、モリサワ「タイプデザインコンぺティション 2012」和文部門で、モリサワ賞 銅賞、明石賞、ファン投票1位と3つの賞を受賞した書体なのです。   受賞者の豊島晶さんが「落語や小噺のような、下町の人情的で温かみのある世界観で制作した」というこの書体は、たくさんの墨を含んだ筆で書いたような、ふくよかで瑞々しい点画が親しみを感じさせる、かわいらしいデザインが特徴です。 ホムパ、女子会、何着てく? 日本語の書体デザインといえば、原稿用紙のマス目に文字を書くように、真四角の中に規律正しく描かれることが一般的。 ですが、この「すずむし」は、あえて正方形にまとめない文字の設計が、アンバランスながらも、文章にしたときに軽妙なリズムを生み出します。漢字、ひらがな、カタカナの微妙な大きさの違いも相まって、まるで文字が動き出しそうな雰囲気を持っています。 漢字も一見ゆるやかな印象ですが、メリハリの効いた縦と横のラインと、しっかりと作り込まれ細部によって、文字の形がはっきりと浮かびあがり、読みやすさとデザインを両立しています。 恋するモテ髪 恋するモテ髪 恋するモテ髪 他のデザイン書体と比べてみました↑ 上は軽妙でかわいらしい印象の「はるひ学園」、下はぷっくりとしたふくよかな「プリティー桃」です。いかがでしょうか。 その個性が光る「すずむし」は、親しみやすさ、かわいらしさを演出したいときなど、子どもや女性向けの媒体はもちろん、昔ながらの情緒を感じさせる和のデザインとも相性抜群です。 魔法のパン屋さん   そんな「すずむし」の作者である豊島さんも登壇する特別セミナー「タイプデザイナーの視点」が、3月20日(金)に東京・秋葉原で開催されます。書体デザイナーやエンジニアの方々による、フォント制作の舞台裏や最新トピックの講演です。ここだけのエピソードも盛りだくさんです! 講演内容やお申し込みはこちらから ▶「すずむし」はフォント一覧の「デザイン書体」またはフォントファミリー名からお選びください (サカモト)