タイポグラフィの究極のガイド:ポイントサイズ、大文字と小文字、全角ダッシュと全角ダッシュなど

タイポグラフィは、書かれた単語と文字や文字がどのように表示されるかを扱う分野です。

同じ文字をさまざまな方法でスタイリングして、さまざまな感情を伝えることができます。また、スタイルと読みやすさには、あらゆる種類のトレードオフがあります。

この記事では、ポイントサイズ、大文字と小文字、全角とダッシュ、カーニングなど、タイポグラフィに関連する小さい(ただし重要な)詳細をいくつか見ていきます。

ポイントサイズ

ポイントサイズは、タイポグラフィに標準化を導入する方法です。ポイントサイズは最小の測定単位です。

金属タイプでは、ポイントサイズは、書体の文字がキャストされる金属ボディの高さを指します。デジタル書体では、金属製の本体がemsquareと呼ばれる目に見えないボックスに置き換えられます。各文字は、そのem正方形またはemボックス内に収まります。フォントemサイズは、そのポイントサイズと同じです。

html{ font-size:16px; } body{ font-size:1em; // 1em is equal to 16px }

ポイントサイズは、フォントサイズとは別に、先頭(行の高さ)、行の長さ、およびその他の要素の測定にも使用されます。

デジタル書体では、1ポイントは1/72インチに相当します。12ポイントで1パイカになります。6つのピカが1インチになります。パイカとポイントを表す一般的な方法は次のとおりです。

  • 1パイカ= 1p
  • 1ポイント= 1ポイントまたはp1
  • 6パイカと3ポイント= 6p3
  • 9ポイントのリードを持つ7ポイントのオープンサン= 7/9オープンサン

印刷の最適なポイントサイズは通常10〜12ポイントですが、Webの場合の最適なポイントサイズは15〜25ポイントです。

CSSでは、ピクセルよりもemsまたはremsでフォントサイズを設定する必要があります。前者は本質的にスケーラブルであるためです。最近、新しく導入されたユニットvwとvhを使用した流体タイポグラフィについて多くの話題があります。

詳細はこちら:Fluid Typography

同じポイントサイズに設定された異なるフォントは、それぞれの特性(x-height、ストロークモジュレーション、またはコントラストと文字幅)のために、同じサイズであるようには見えないことに注意してください。

大文字と小文字

大文字(UC)は、キャップと大文字とも呼ばれます。大きな文字の書体です。小文字(LC)は、小さな文字の書体です。Shiftキーが押されておらず、Caps Lockがアクティブでない限り、入力されたものはすべて小文字です。大文字と小文字は、多くの場合、MajusculeとMinusculeと同義です。

多くの言語は、それらの文字の書かれた二つの異なる表現を有する上ケース下ケースもmajusculeそして微小フォームとして知られます。

大文字と小文字が同じテキストに混在していることがよくあります。格の使い方は文法によって決まりますが、さまざまな格スタイルもあります。CamelCaseやsnake_caseのように、命名規則と呼ばれる特定のケーススタイルがコンピュータープログラミングで一般的です。

大文字:

ABCDEFGHIJKLMNOPQRSTU VWXYZ

小文字:

abcdefghijklmnopqrstu vwxyz

大文字の使用は、次の理由で重要です。

  • パスワード:パスワードでは大文字と小文字が区別されるため、大文字と小文字を区別するとセキュリティがさらに強化されます。
  • 測定:コンピューター測定やその他の測定を扱う場合、正確な測定タイプを識別するには大文字が重要です。たとえば、「Mb」(メガビットの略)と「MB」(メガバイトの略)は、値が異なる2つの異なるタイプの測定値です。
  • コマンド
  • ファイル名、ディレクトリ、パス。

EmsとEns

EmsとEnsは、「ダッシュ」と呼ばれる句読点の形式です。外観はハイフンに似ていますが、目的は異なります。

エムダッシュ

文の切れ目を示すには、全角ダッシュを使用します。カンマの代わりに使用するか、文の一時停止を示します。また、引用を話者に帰するためにも使用されます。Emダッシュは1em幅、つまり書体のポイントサイズの幅です。全角ダッシュの前後にスペースを入れないでください。

例:隣人の家からの騒音—それは私を殺しています。

  • MacでのEmダッシュのコマンド:Shift-Option-Hyphen
  • Microsoft Wordでの全角ダッシュのコマンド:Alt + Ctrl +(マイナス)
  • HTMLの全角ダッシュ:または

エンダッシュ

単語「to」の代わりに、または数字の範囲を示すために、Enダッシュを使用します。EnダッシュはEmダッシュの半分の幅です。ダッシュの前後にスペースを入れないでください。

例:最初の世界大戦は1914年から1918年まで続きました。

  • MacでのEnダッシュのコマンド:Option-ハイフン
  • Microsoft Wordのダッシュのコマンド:Ctrl +(マイナス)
  • HTMLでダッシュ:または

カーニングと追跡

カーニングとは、単語内の2つの個別の文字間の間隔を指します。

追跡とは、単語間の間隔を指します。

一部の書体は、カーニングまたは追跡が緩すぎるように設計されておらず、その逆も同様です。カーニングやトラックがきつすぎたり緩すぎたりすると、読みやすさと読みやすさが犠牲になるリスクがあります。

テキストをカーニングまたは追跡するためのタイトまたはルーズを決定するときは、最初にテキストが相互作用するスケールを検討することをお勧めします。印刷する場合、視聴者は印刷されたテキストからどのくらい離れていますか?彼らは運転しますか?バックライト付きの画面で読み取られますか?

追跡とカーニングを行うときは、正と負の根拠も考慮する必要があります。トラッキングがきつすぎたり緩すぎたりすると、図と地面の関係が不自然になり、ユーザーの注意をそらす可能性があります。

読みやすさと読みやすさ

読みやすさ

読みやすさは、テキスト内のさまざまな文字を区別できることを意味します。読みやすいテキストは、簡単に解釈できることを意味します。読みやすさを検討するときは、書体の固有の特性を確認してください。考慮事項のいくつかは次のとおりです。

  • コンテキストと使用目的に応じて、各書体を使用する必要があります。その歴史を調べて、それが最良のユースケースシナリオです。例:Garamondは印刷物の大きなテキストに最適ですが、Georgiaは画面に使用されます。
  • 書体が表示テキスト用か本文テキスト用かを覚えておいてください。
  • 書体のx-heightは、書体の小文字の「x」のサイズです。エックスハイト中程度から高い書体では、小さいサイズでもテキストが読みやすくなります。
  • 従来、セリフ書体は、サンセリフ書体よりも本文テキストの方が読みやすくなっています。

読みやすさ

読みやすさは、テキストをよりアクセスしやすくするような方法で単語のグループまたはテキストのブロックを配置することを意味します。アイデアは、テキストの本文を読むために必要な労力の量を減らすことです。

スティーブン・コールズは、読みやすさは「読めますか?」という疑問を投げかけるだけではないと述べています。しかし、「あなたはそれを読みたいですか?」

Jason Santa Mariaは、彼の著書On Web Typographyで、読書は直線的な活動ではないと指摘しています。私たちはサッケードと呼ばれる前後の動きで読みます。これは私たちの目が1つのポイントから別のポイントにホッピングすることです。また、なじみのある言葉のテキストは私たちが読みやすくします。読みやすさを検討する際に覚えておくべきいくつかの基本的なポイントは次のとおりです。

  • コントラストとは、文字のさまざまな部分でのストロークの太さの変化を指します。コントラストが高いほど、ストロークの変化が大きくなります。長いテキストの本文には、中コントラストから低コントラストの書体を使用します。
  • 行の高さは、2行のテキスト間の距離を指します。テキストのブロックをきつすぎたり緩すぎたりしないようにします。 CSSの行の高さは、プロパティ 'line-height'で制御できます。ほとんどのテキストでは、1.2から1.5の間に設定できます(単位なし)。
  • 行の長さ(メジャー)は、テキスト行の平均文字数を指します。行の長さが長いと、目でテキストをスキャンしにくくなるため、読みやすさが妨げられます。通常、テキストの本文には1行あたり約45〜75文字が最適です。それを超えて行の長さを増やす予定がある場合は、2行のテキストの間に十分なスペースができるように、行の高さも増やすように注意してください。 CSSでは、コンテナの幅を設定できます。emユニットを使用すると、フォントの幅と高さの比率に応じて、設定した文字数に近づけることができます。例:幅:35em;
  • トラッキングとは、テキスト内の文字間のスペースを調整することです。トラッキングを追加するとは、文字間に空白を追加することを意味し、その逆も同様です。フォントサイズが小さい場合、つまり10ポイント未満の場合、トラッキングを追加すると読みやすさが向上します。同様に、大きな見出しの場合は、ネガティブトラッキングを使用して文字を近づけます。'letter-spacing'プロパティを介してCSSでの追跡を制御できます。例:文字間隔:0.05em;
  • フォントサイズとは、テキストで使用されているフォントのサイズを指します。モバイルディスプレイの場合は、12px以上のサイズを使用してください。'font-size'プロパティを介してCSSでfont-sizeを制御できます。例:font-size:48px;

ご覧のとおり、最適な読みやすさと読みやすさを確保するには、多くの要素を考慮する必要があります。上記の要因のいずれにも厳格な規則はないことを忘れないでください。それらは、活版印刷の目をよりよく訓練するのに役立つかもしれない単なるガイドラインです。

色と色調の値

色彩理論では、色調値は、選択した色に白、灰色、または黒を追加することによって生成されます。これは色相を変更しませんが、彩度としても知られるカラフルさを変更します。色調の値を議論するとき、議論しなければならない3つの主要な用語があります:色合い、色調、および色合い。

色合いは、色に白を追加することです。色合いを使用して、領域を強調表示したり、オブジェクトに奥行きのある錯覚を作成したりすることができます。

トーンは、色にグレーを追加することです。色調の色は、より落ち着いた、彩度の低い色を作成します。

シェードは、色に黒を追加することです。シェードを使用して暗くし、領域を作成して、オブジェクトに奥行きのある錯覚を作成できます。

色調の値を変更することで、画像に奥行きのある錯覚を作成したり、彩度レベルを変更して、目的の感情や気分に合わせて色をより適切に適用したりできます。

タイポグラフィの詳細:

  • タイポグラフィ:文字の構造
  • 8ポイントグリッド:ウェブ上のタイポグラフィ
  • タイポグラフィがデザインを左右する理由