web-dev-qa-db-ja.com

タイトルに流動的なフォントサイズを使用することは悪い考えですか?

私が開発したサイトの1つでは、ページのタイトルは常に1つのWordです。 1つの単語ですが、単語の長さが異なります。タイトルのフォントサイズをなるべく大きくしたい。長い単語の大きなフォントサイズは、短い単語には十分な大きさではありません。

たとえば、これはfixedフォントサイズです: enter image description here

enter image description here


そして、これらは流動的なフォントサイズです( some jQueryライブラリを使用することにより。フォントサイズは流動的ですが、最大フォントサイズを定義しました): enter image description here

enter image description here


UXにfluidフォントサイズを使用するのは悪いことですか?

22
herci

あなたの具体的な例と、あなたが提供した限られた情報については、はい、それは悪い考えですと言います。

提案したことを行うと、次の基本的なルールに違反する可能性があります:

ページ全体は、利用可能なアクションとユーザーが求める情報に簡単にアクセスする方法をユーザーに明確に伝える方法で設計する必要があります

次の一貫性を保つことを検討してください。

  • サイズ
  • 重量
  • ポジション
  • タイプ
  • コントラスト

http://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636

したがって、特にあなたの提案で私が見る問題は、同じタイプのヘッダー間でconsistencyを壊すことによって、情報のhierarchyに影響するということです。

例:以下では、短い方が長い方の単語よりも重要な情報として際立っています。フォントサイズが大きいからです。

ショート

もっと長くなる

要約すると、同じタイプのタイトルに異なるスタイルがある場合、ユーザーはこれらを異なるタイプの情報を表すものとして見る可能性があることに注意してください。

32
Dave Haigh

誰もがそれは単に機能しないと言いますが、正直に言うと、それは確かに機能するデザインを見たので、大まかな一般化だと思います。それで、これを使用して、いつそれを使用するか、いつ使用しないかを把握する一般的なルールを定義することを考えました。

使えるとき

  • 他の要素はヘッダーがヘッダーであることを明確にするの場合。

    たとえば、私はこれを内部デモで使用しました。最初の画面の上位80%は、ページのタイトル(常に引用でした)が付いた巨大な様式化された吹き出しで、吹き出しはいっぱいでした。吹き出しが常に同じサイズである(そして、どこかをクリックするか、少しでもスクロールしても吹き出しの下からボックスを上にスクロールした)間、引用符が(縦と横の両方で)どれだけ短いかまたは長いかが問題になります。

    この例は上にあり、はるかに単純なフレーム(または他の何か)でも同様にトリックを実行できますが、要点は次のとおりです。「サイズ」は、主にテキストの相対的な重要性を示すプロパティではなく、グラフィックプロパティになります。なので、他の要素(ページ上の位置、グラフィックフレームなど)がその役割を引き継ぐ必要があります。

  • ページ上の他のテキストで、ヘッダーの最小サイズよりも大きなフォントサイズを使用できない場合
  • 一般的に言えば、ページに単一のヘッダーのみがある場合。異なるフォントサイズのページに複数のヘッダーがある場合、すぐに混乱します。これが厳密な規則であるとは主張しません。適切なグラフィックフレーミングが与えられれば、複数のヘッダーを使用してそれを実行することも可能かもしれませんが、それははるかに難しいでしょう。

それで、あなたのケースはどうですか?

あなたは、ほとんどの場合、100pxのフォントサイズは完璧であり、正常に機能するが、一部の単語は長すぎると述べました。もちろん、タイトルやものに­-- hyphensを追加することはもちろん可能ですが、これは実際に許容できるケースの1つだと思います。ページのメインヘッダーである単一のWordをハイフンでつなぐと、ひどく見え(純粋に設計上の考慮事項)、最長のWordに合わせてすべての単語を小さくすると平凡に見えます(ほとんどの場合、100pxが最適なフォントサイズであると想定しているため)言葉)。さらに、ヘッダーがヘッダーであること(Wordがページの最初のアイテムであること)を明確にし、テキストのフォントサイズ+ 12pxなどの最小フォントサイズを設定している限り、別の要素があります。実際に美しく機能すると思います。

10
David Mulder

これは意図したとおりに機能しません。ユーザーがページ間を移動すると、フォントサイズが変化することに気づくでしょう。

これに伴う問題は、大きなフォントは階層の上位レベルを示すため、人々は階層の違いがないことに気づくでしょう。

この認識された階層を以下に示します。これらの例では、多くの人が最初の2つの見出しを1つのセクションの一部と見なし、最後の見出しを新しいセクションと見なしています。

—フォントサイズの効果の例—

こちらが見出しです

ロレム・イプサム・ドーラーは座り心地がよく、僧侶は外交的エリートです。 Duis quis neque quis sapien gravida dapibus eu et eros。 Donec ut ipsum velit。 Pellentesque vulputate in purus quis maximus。 quam non leo porta semperでプレゼント。 Nulla tincidunt porttitor sapien sed bibendum。 Donec eget justo et quam maximus facilisis eu suscipit sapien。

これは見出しです

Donec id condimentum urna。 Suspendisse fermentum、est eget cursus maximus、dolor felis blandit est、varius imperdiet neque neque sed mauris。プレザントラクスニシ、エリートIDのアリケット、ティンシドゥントプルビナールドゥイ。 Proin ut nisl vel odio semper commodo ut nec libero。 Interdum et malesuadaはfaucibusのac ante ipsum primisで有名です。 Maecenas ultrices、nisl iaculis mollisアリケット。 Nulla venenatisパース。

こちらが見出しです

Diam rutrumの整数、accumsan maurisはamet、laoreet metusに座っています。 Posuere Mauris、Pretium Pulvinar ipsumの前庭。 Sed cursus semper metus、maximus pellentesque libero sodales vitae。nec odio sem。nec sollicitudin quam、tempus pharetra nibh。Praesent malesuada massa nec justo placerat tempus、et cursus nisl ligl velit velit.

6
JeromeR

(1)一般的な「グラフィックデザイン」という用語では-これを行わない。まるでゴミのようです。 「理由」は、consistencydistinctionsおよびtidyness-グラフィックデザインのさまざまな要素または概念が一貫する理由(色、サイズ、書体など)。したがって、「グラフィックデザイナー」は「それをしないでください、それは愚かに見えます」とだけ言って、それは正しいです。

(2)とはいえ、本当に膨大な見出しがある場合は、このように見出しを揃えることができるという見方があります。ボディコピーと比較すると、すべてのヘッドラインが非常に大きいので、完全に明確である-たとえサイズが異なっていても、「巨大な」ヘッドラインはすべて同じものであると言えます。

(興味深いことに、これは一種の "Victoriana"の外観(むしろエキサイティングです!男の子が所有する雑誌や鉄道の時刻表などの広告)、または実際に現代的なヒップなもの( The Face時代の雑誌があり、いつもこれを煩わしくしていたので、思い出せません))

私はそう思いますが、よくわかりません。これは、「積み上げ」見出しの外観と呼ばれることもあります。

例として [〜#〜] here [〜#〜] に行き、Gorilla Coffeeの例(赤い背景)を見てください。

(最近、広告などのその「積み重ねられた」見出しの見た目の無限の例があります-私はそれらをグーグルアップするのが難しいことに気づきました!他の人が現在のブランドの一般的な例をいくつでも提供すると確信しています。)

繰り返しますが、「長い記事の見出しに対してこれを行うべきか」と単純に尋ねるだけの場合、非常に単純な答え(上記の「1」を参照)であるので、それを行わないでください。ばかげているように見えます。

しかし、私はこの「積み重なった見出し」の見た目が、より大胆なポスターのように、そのタイプのものとして現れることをあなたに注意を向けさせています。

最後に、(3)

この質問には、おそらく次の点に関心があります。

shrinking見出しのような要素(または何でも)のフォントサイズは、iOSに組み込まれた機能です(長年にわたって)。

(iOS用にプログラムを作成していない人のために、ここに例を示します。通常はHelvetica 11です。ただし、「自動圧縮」をオンにすると、名前が長くなると、この場合は6に縮小されます。ワーストケースとしてポイントします。それを超えると、テキストが切り捨てられます。

enter image description here

したがって、アプリでは、これは確かに標準的な動作であり、テキストが動的に生成される場合、つまり常に使用します。チャプターのタイトル、番地、ここでは人の名前などがどれくらいになるかわかりません。 (dynamicテキストが長すぎることがわかった場合、自動縮小の唯一の代替手段であると思いますが、テキストをトリミングするだけです-あなたは何かをしなければなりません、アプリをクラッシュさせることはできません。)

そのため、(良くも悪くも)iOSアプリでは、デフォルトでこれが発生することを考慮する価値があります。基本的に、ビジネスまたはテキストベースの(ゲームではない)iOSアプリです。

(本当に、アプリでは、私はそれが悪いと思います...しかし、テキストがその場で生成され、それが一部のスペースに収まる-単にそれを省いたりトリミングしたりする以外は。)

したがって、UXの専門家ではないあなたがここであなたの質問を見て、「今日の若者たち」は単に「何をしているのか、それはどこでも起こります」(「どこでも」は「アプリ内」の意味)とだけ言うだろう。

0
Fattie