ウェブサイトを構築する場合、一般的には本文の定義から始めます。本文の定義はメインカラムの幅を示し、他のカラムのサイズは独自のコンテンツで定義されます。最近まで、さまざまな画面解像度は多かれ少なかれ均一でした。今日では、さまざまな画面サイズと解像度に対応しなければなりません。そのため、取り扱いが複雑になっています。
再集結の意気込みで、レスポンシブ・タイポグラフィについてのブログを書きましたが、この記事では主に最新の試みであるレスポンシブ・フォントに焦点を当てます。IAの歴史を知らないと、新しく立ち上げたウェブサイトにおけるレスポンシブタイポグラフィとデザインの重要なポイントを見逃してしまうかもしれません。すべての記事を照合する代わりに、私はゼロから始め、レスポンシブ・タイポグラフィを段階的に説明することにしました。これが最初のステップです。
可能な画面サイズごとに異なるデザインのレイヤーを作ることを防ぐため、多くのウェブデザイナーはレスポンシブウェブサイトのコンセプトを採用しています。一言で言えば、ウェブページのレイアウトが画面サイズに自動的に適応するというコンセプトです。このコンセプトを定義する方法はたくさんあります。私はこの方法が好きです：
アダプティブ・レイアウト：限られた画面サイズに合わせてレイアウトを段階的に調整します。流動的レイアウト：あらゆる幅にフィットするよう、常にレイアウトを調整。どちらのアプローチにも利点と欠点があり、読みやすさは常にウィンドウと同じ幅のレイアウトを持つことよりも重要であるため、ごくわずかな合理的な位置の変化にレイアウトを適応させることが取るべきアプローチであると考えられています。これが複雑な問題かどうかは議論の余地がありますが、最適な読みやすさを実現するには、テキストサイズをある程度コントロールする必要があり、この点で、流体レイアウトはより多くの問題を引き起こすようです。
フォントの選択
適切なカラーパレット
遅かれ早かれ、どのフォントを使うかを決める必要があります。フォントの選択は主にトーンの問題ですが、各フォントには独自の特質があり、ある程度の処理が必要なため、フォントの選択は多くの視覚的および技術的結果を生み出します。ウェブフォントの種類は非常に豊富なので、適切なものを選ぶのもまたテストのひとつです。
自分のウェブサイトのフォントをデザインすることで、ステージフォントの実験。コンテンツの抽出をマッピングしながら、カラーパレットに合うセリフ書体が選ばれました。IA WRITERには等幅フォントを選びました。このプログラムの主な目的は、初稿の作成を支援することなので、特にnittiフォントが選ばれました。また、等幅フォントを使うことにしたのは、最初のipadのシステムではプロポーショナルフォントが自動的に締まらなかったからです。レンダリングの悪いプロポーショナルフォントではなく、等幅フォントを使うことは即決でした。
セリフ体またはサンセリフ体
通常、セリフフォントとサンセリフフォントのどちらかを選ぶことになるでしょう。それ自体が複雑な問題ですが、ここに簡単な経験則を示します：セリフは司祭、サンセリフはハッカーです。どちらが優れているというわけではありませんが、さまざまな理由から、セリフフォントはより権威主義的な傾向があり、サンセリフフォントはより民主的な感じがします。これは5,000年にわたるタイポグラフィの歴史が2行の怠惰な線の中に包まれていることを忘れないでください。
画面上のタイポグラフィの問題、「セリフ体かサンセリフ体か」、その問題自体が答えを出していると思っている人はまだ多い。実際には、それほど単純ではありません。一般に信じられているのとは逆に、セリフフォントもサンセリフフォントも、サイズ12より大きいフォントを選べば同じようにうまく機能します。12より小さいセリフフォントは十分にシャープにレンダリングされませんが、現代のモニターでは12は間違いなく小さすぎます。
サイズは？
本文のフォントは個人の好みではなく、読む距離によって決まります。平均的なスクリーンは、本よりも人から少し離れているため、デスクトップフォントは印刷されたものよりも少し大きくなります。
下のパターンは、ボディのフォントがボディから離れるにつれて、より大きなフォントが必要になることを示しています。2つの黒いものと2つの赤いAは同じメートルサイズです。しかし、右のものはより遠いビットで保持されているため、知覚されるサイズは小さくなります。右の赤いAと左の黒いAは、感覚的には同じメートルサイズ：
[]
フォントが遠くにあればあるほど、視覚的に小さく見えます。遠くで読むときには、フォントを少し大きく設定する必要があります。どのくらいの大きさのフォントを使うかは科学の問題です。経験が少ない場合は、きれいに印刷された本を適切な読書距離に置き、画面のフォントサイズと比較するのが有効な方法です。
ウェブデザインの経験のないグラフィックデザイナーは、ウェブページの本文フォントを印刷用フォントと比較すると、その大きさに驚きます。注意してほしいのは、行ごとに比較したときに大きく見えるだけで、レンズを通して見たときにはそうではないということです。
[]
本文のサイズを大きくした後、最初は新しいフォントにイライラしても、それは普通のことですのでご心配なく。しかし、一度慣れてしまえば、「標準」の小さなサイズに戻したくなくなるでしょう。
Perspectivised Proportions」フォントサイズは2006年から推奨されています。当初、本文のフォントサイズはGeorgia 16が適切であるとの声明は、多くの怒りと嘲笑を引き起こしましたが、今では多かれ少なかれ普遍的な基準となっています。より高度なソリューションが登場するにつれ、この標準は徐々に古臭くなってきています。
#p#
行の高さとコントラスト
本文のフォントサイズは遠近法のトリックで評価できますが、行の高さは微調整が必要です。読む距離が長くなり、ピクセルのにじみが多くなると、画面上のテキストの行の高さを印刷物よりも少し大きくしたほうがスマートです。
[]
今日、前提として、コントラストが弱すぎたり、きつすぎたりしないようにしたいものです。スクリーンフォントは白地に黒でデザインされているため、黒い背景を使うのは少し難しいのですが、うまくやれば素晴らしいものになります。最近の高コントラストのスクリーンでは、白地に濃い黒ではなく、黒とグレーのフォントや薄いグレーの背景を選ぶのが望ましい。しかし、それでも重要なのはそこではありません。
iPhoneとiPadの比較
レスポンシブ・タイポグラフィの学習の多くは、ライティングソフトウェアに最適なフォントを見つけることから始まります。IA WRITERをデザインする際、適切なタイポグラフィ・ソリューションを見つけるのに何週間もかかりました。当時、高解像度のipadの画面はまったく新しい挑戦で、その仕組みがわかるまでにも時間がかかりました。アップルがiphoneの網膜スクリーンを発表し、その後ipadの網膜スクリーンを発表したとき、すべてが変わりました。IA WRITERの "アイロニック "フォントをどのように思いついたかについては、一冊の本が書けそうですが、このようなごく一般的なことについては話すことが多すぎるので、手短にします。
最新版のiphoneのソフトとipadのソフトを比べると、フォントの大きさが違うことがわかります。
なぜiphoneとipadでフォントサイズを使い分けるのですか？上記の説明をよく読めば、もうお分かりでしょう。
人とスクリーンの距離が常に同じでない場合、典型的なのは、朝食のテーブルでipadを持っているとき、ソファに座っているときに膝の上に置いているとき、ベッドに横になってスクリーンが目の前にあるときなど、これらのシナリオでは、使用距離がさまざまに異なります。デスクトップとラップトップの使用距離はそれほど変わらないので、まったく新しい挑戦です。すべての距離でうまく機能するように、フォントサイズを決定するために最も遠い距離が選ばれました。これはベッドで使うよりも大きなフォントが得られるかもしれませんが、しかし、この時点で違和感がありますし、また、横になっているときにお腹の上にipadを置いて書くことは通常ありません。
iphoneは上部の画面スペースが少ないだけに、集中して調整する必要があります。幸い、iphoneは目の前の非常に近い距離で操作することになるので、非常に小さな文字サイズで完璧に動作します。平均的な読書距離から、iphoneとipadのフォントサイズを同じようにすることができます。
iphoneは目の近くに置かれるので、列の高さはもっときつくてもいいかもしれません。）
スクリーンのためにデザインするとき、すべてが思い通りになるわけではありません。インタラクションデザインはエンジニアリングです。完璧なデザインを見つけるのではなく、完璧な妥協点を見つけるのです。この例では、行の高さ、行間、単語の間隔などを小さくする必要があります。
このような調整はとても細かいので、行間がどれだけ狭いか気づかないほどです。なぜ行間を取らないのですか？行間は美的なものではありません。テキストを呼吸させるだけでなく、ある行から別の行への視線移動を助けます。このようなことを理解するのは難しいと思われるかもしれませんが、そうではありません。
#p#
デスクトップはどうですか？
macの上のWRITERのフォントが大きすぎるという苦情もあります。ipadと同様、macの画面に合う最も控えめなフォントサイズを見つけることが問題でした。当時、参考にしたのは24インチの高解像度imacで、その結果、フォントサイズは他のすべてのデバイスに多かれ少なかれ適していました。
[]
IA WRITERが動作するMACコンピュータの数は限られているため、さまざまな適切なソリューションを決定することができます。このテキスト・サイズが様々なデバイス上で最良の妥協点であることを確実にするために、様々な可能性のあるレイアウトが検討されました。
[]
フォントサイズをユーザーに選ばせればいいじゃないか」と思われるかもしれません。しかし、フォントサイズの調整は興味の問題ではなく、読む距離の問題です。ほとんどのウェブサイトやアプリのフォントサイズは極端に小さいため、新規ユーザーは最初から慣れ親しんだサイズを選択することになり、その結果、「フォントが小さすぎてソフトウェアを書く楽しさをすべて体験できない」ということになります。この主な理由は、すべてのユーザーに何らかの考えを押し付けようとするためではありません。IA WRITERが求めているのは、セットアップや手探りを必要とせず、ただ書くだけでいいということです。これがIA WRITERの成功の公然の秘密であり、これを変えることはソフトウェアの核心を変えることになります。
それなら、デバイスの解像度に合わせて自動的に調整すればいいのでは？それが本当のレスポンシブ・タイポグラフィではないでしょうか？はい、このコンセプトに似たことが行われています。さて、識別調整によって、同様に、さまざまなサイズや解像度でフォントが期待通りに表示されるように、視覚的に適切なウェイトを選択する必要があります。フォントはフォントサイズと解像度によって視覚的に同時に変化します。MAC、IPAD1/2、IPAD上のIA WRITERが異なるウェイトで表示されるのはこのためです。グレーデッド・デジタル・フォント」のロジックとウェブサイトの背後にある考え方を明確に説明するには、もう少し時間とスペースが必要ですので、PART IIをお待ちください！
現在のポジションに対する反応
インタラクションデザインはエンジニアリングである」という言葉を読むまで、私は混乱していました。これはどのように機能するのでしょうか？
.他の多くの人が疑問に思っているように、引用の全文はこうです：「スクリーンのためにデザインするとき、すべてが期待通りに動くわけではありません。インタラクションデザインとはエンジニアリングであり、完璧なデザインを見つけることではなく、完璧な妥協点を見つけることなのです」。普通なら、"ウェブデザインはエンジニアリングだ：完璧を求めるのではなく、最良の妥協点を見つけることだ "と言うでしょう。なぜなら、デザインには明らかに技術的なヒントがたくさんあるからです。私が「インタラクションデザイン」を使うのは、これらの例でアプリを使っているからです。
つまり、グラフィックデザインでは視覚的なコントロールが要求されるだけでなく、非常に高度なコントロールが可能であるのに対し、ウェブデザインでは視覚的なデザインとテクノロジーの相互の妥協点を最初から考える必要があり、完璧な結果を得るためには、さまざまな解像度を検討し、それぞれの長所と短所を調べ、最適ではない選択肢の中から最良の妥協点を見つける必要があるということです。
このとき、グラフィックデザイナーは、自分たちも多くの技術的な問題を扱っていることを証明しようとして、あなたの話を遮ることがよくあります。もちろんそうです。すべてのアートやデザインには技術的な知識が必要です。しかし、車のエンジンをデザインするのとウェブサイトをデザインするのとでは違いがあるように、ウェブサイトや雑誌をデザインするのとウェブサイトをデザインするのとでは違いがあります。その違いは、エンジニアリングの程度に関係しています。
要約すると、ウェブサイトやアプリをデザインする際の考え方の多くは妥協であり、デメリットがあまりない解決策を見つけようとするものだということです。Khoi Vinhは、スクリーンデザインとグラフィックデザインの違いについて、さらに素晴らしいプレゼンテーションを行っています。
