ウェブデザインでテキストのサイズを合わせる方法: 小さなテキスト、大きな体験

ウェブデザインでテキストのサイズを合わせる方法: 小さなテキスト、大きな体験
小さなテキスト、大きな体験 Sanlian チュートリアル
iPadなどのモバイル端末の普及により、人々がモバイル端末で読書に費やす時間はますます長くなり、読書体験の重要性が高まっています。フォントは読書体験の鍵となりますが、フォントは読書体験の成功または失敗にどのような影響を与えるのでしょうか?
1. 認知度は高いですか?
まず、Consolas フォントを見てみましょう。i と w の幅が同じであることがわかります。この等幅フォントは認識度が非常に高く、テキストの書き込み、コードの表示、その他のタスクに非常に適しています。
もう一度この例を見てみましょう。Arialではiとlの認識率が非常に低く、ilなどの狭い単語が続くと単語の選択が困難です。また、ジョージアでは文字のoと数字の0は大きさがわずかに異なるだけで基本的に区別がつかず、一目で区別することが困難です。
このことから、等幅フォントは文字の大きさや密度が固定されており、文字自体の影響が少ないことがわかります。このタイプのフォントはシンプルで認識しやすく、読む効率が大幅に向上します。しかし、等幅フォントにも重大な問題があります。高い認識度と引き換えに美観を犠牲にしているため、ほとんどの場合、一部のコード エディターやその他のソフトウェアでしか使用できません。
2. Arial と Gerogia は長時間の読書に適していますか? これら 2 つのフォントは PC の Web ページで非常によく使用されますが、長時間の読書にはどちらが適していますか?
サンセリフ フォントはよりシンプルで目を引くように見えますが、認識しやすさはセリフ フォントほど明確ではありません。読者に長時間読んでもらいたい場合は、考えずにテキストをスキャンできるようにする必要がありますが、Georgia にはまさにこの機能があります。そのため、一般的に、同じ印刷条件では、セリフフォントの読み取り速度はサンセリフフォントの読み取り速度の約 5 分の 1 速くなります。
まず、セリフ ストロークはフォントの見た目を美しくするだけでなく、フォントを識別するのにも役立ちます。次に、これらのセリフ ストロークは、ベースライン上のこれらの文字のストロークを視覚的に一定の水平ガイドにすることができ、視覚を水平方向に移動するように誘導し、認識係数を高めることができます。これが、Georgia のようなセリフ フォントが PC や従来の出版で非常に人気がある理由です。
サンセリフ体の Arial は貴族の女性のようで、地下鉄やその他の大きなイベントの目を引く標識に適しています。一方、ノンセリフ体の Georgia は小さな家庭の美しい少女のようで、行間を読むのに決して飽きることはありません。
3. モバイル端末に適していますか?
iPad のディスプレイ画面は、通常のコンピュータよりも明るさとコントラストが高いため、通常のコンピュータに適したフォントやデザインの多くは、背景の明るさのために、iPad に直接移動するとぼやけて表示されます。これは特にフォントをペアリングするときに問題になります。一部の細いフォントはひどくぼやけており、本来適切な組み合わせが一致しなくなり、ユーザー体験に重大な影響を及ぼします。
Retina ディスプレイはより細かい精度をもたらしますが、フォントのレンダリングに多くの問題をもたらします。これは、通常の画像をスケーリングせずに表示すると、画像内の 1 ピクセルを表示するために 4 ピクセルが使用されるのに対し、Retina 画像を表示すると、各ピクセルが画像内の 1 ピクセルに対応するためです。そのため、Georgia などの一部のフォントは非常に細くなり、表示時にフォントがデザインと一致しなくなり、エクスペリエンスに影響を及ぼします。
実際のところ、ハードウェアを変更する方法はなく、これらの問題を回避することしかできないため、モバイル端末のテキスト サイズを適切に増やす (14 ピクセル~ 16 ピクセル) のが賢明です。また、文字の太さを太くすることで、ぼやけた感じにならないようにすることもできます。英語表示に関しては、PC の定番である Georgia は注意が必要です。
4. 丁寧な組版があるかどうか<br />この点において、Tangcha は中国語の組版において非常に優れた仕事をしており、禁則処理、先頭と末尾の整列、英語の改行 (ハイフネーション) などの基本的な組版技術を実装しています。また、句読点プラグイン (行末の句読点、カンマ、セミコロンなどの句読点は、テキストの右枠の外側の端に「ぶら下げ」られます) や段落のインデントについても実験的な試みを行っており、いずれも読者に優れた読書体験をもたらしています。
さらに、読書体験は、さまざまな場面で異なるフォントを使用すること、フォントのサイズ、太さ、テキストの行の長さ、単語間の密度など、他の重要な要素によっても左右されます。
読書は大きなことであり、そのあらゆる側面は言葉と切り離すことはできません。言葉は小さくても、一筆一筆が経験と密接に関係しています。デザイナーにとって、優れた読書体験とは、視覚的な美しさを追求することだけでなく、読者への配慮でもあります。

<<:  Ubuntu のインストール グラフィック ドライバーと Cuda チュートリアル

>>:  Flexレイアウトとスケーリング計算についての簡単な説明

推薦する

HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy

IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決:指定さ...

MySQL データベースは XA 仕様をどのように実装しますか?

MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...

jsはクリックしてカードを切り替える機能を実現します

この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...

動的なセカンダリメニューを実現するためのCSS

シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...

純粋な CSS でカスタムラジオボタンとチェックボックス機能を実装する

1. 効果を達成する 2 知識ポイント2.1 <label> タグHTML では、<...

Dockerfile を使用して Node.js サービスをデプロイする方法

Dockerfileを初期化するプロジェクトの名前が express であると仮定して、expres...

CentOS6 アップグレード glibc 操作手順

目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...

Nginx の負荷分散と動的および静的分離の原理と構成

目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...

CSS パフォーマンスの最適化 - will-change の使用方法の詳細な説明

will-change は、要素にどのような変更が行われるかをブラウザに伝え、ブラウザが事前に最適化...

スクロールラグの問題を解決するためのオーバーフロースクロールの詳細な説明

序文div またはモジュールに overflow: scroll 属性を使用すると、iOS フォンで...

MySQL でテーブル データを削除した後もディスク領域がまだ占有されているのはなぜですか?

目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...

Linux デバイスに空き容量がありません inode の満杯により 500 エラーが発生します

iノードとは何ですか? inode を理解するには、まずファイル ストレージから始める必要があります...

この記事ではCSSの組み合わせセレクターの使い方を説明します

CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。 CSS3 に...

面接官はReactのライフサイクルについてよく質問します

ReactライフサイクルReactのライフサイクルを理解するのに役立つ2つの図React ライフサイ...

VueのVuexの4つの補助機能について

目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...