web-dev-qa-db-ja.com

マテリアルデザインのタイポグラフィ-見出し、タイトル、間隔、テキストの外観

私はタイポグラフィに関してGoogleの公式のマテリアルデザインガイドライン( http://www.google.com/design/spec/style/typography.html )を遵守していますが、それらにはかなり欠けていると感じています。たとえば、本文、小見出し、タイトル、見出しdisplay1、display2などに使用する10のスタイルがリストされています。アプリにテキストを入力すると、最初の問題が発生します。

問題#1:「小見出し」または「タイトル」対「見出し」が何であるか、または「display1」を「display4」ではなくいつ使用する必要があるかを知るには、これらの項目に標準がありますか?

さらに、ガイドラインは、テキストの行の高さに先行スペースを組み込む必要があると述べています。したがって、問題2。

問題2#:Androidのテキストに「先頭」スペースを追加するにはどうすればよいですか、これは関連していますAndroidガイダンスですか?

問題#3:Robotoの最新バージョンをダウンロードしましたが、中程度のフォントはGoogleのエレガントでやや太い中程度のフォントとは対照的に、完全に太字に見えますが、フォントが実際にGoogleと異なることを確認するにはどうすればよいですか?

どうもありがとうございました

21
AutoM8R

"コードを表示":私のものではありませんが、コメントを参照してください以下に1つのオプションと、Plaidアプリ(Butcher)がGithub(BaselineGridTextView class)のソースにアクセスしてタイポグラフィの課題にどのように取り組んだかを示します。

免責事項:私はこの件に関して決して言及しているわけではありませんが、あなたの質問は1か月前に回答がありません。そうは言っても、間違いを犯す可能性があるので、少なくとも少しは光を当てて頭を貸そうとするつもりです。

問題#1:「小見出し」または「タイトル」対「見出し」が何であるか、または「display1」を「display4」ではなくいつ使用する必要があるかを知るには、これらの項目に標準がありますか?

これらは、印刷出版の伝統から私たちにもたらされた、一般的な、標準化された抽象的なテキストエンティティです。

  • ディスプレイ:大きなテキスト、通常はプラカード、魅力的なスローガン、注意を求めて競争するもの、ユーザーが見ていないときに注意を引くもの。非常に短いはずなので、正確に読みにくくなります(大規模なフローの一部ではなく、すぐに注意を引きます)。マテリアルデザインの4つの異なるディスプレイサイズはマティアスと彼のチームの特別な注意であると思いますが、アプリが複数のディスプレイサイズを使用することはおそらくありません(たぶん雑誌やリッチメディアアプリなど)。ほとんどのアプリは、ディスプレイサイズをまったく使用しません。
  • Headline:伝統的に、私はこの主題についての私の浅い理解が正しければ、見出しのサイズは short - taglines ストーリーの。説明ではなく、単なるキャッチフレーズ、短いメッセージ。見出しの例:ASSASSIN KILLS KENNEDY。マテリアルデザインに続く一般的なアプリでは、それは 新聞のページのように画面のメインの主題 として使用されます。私は(よくわかりませんが)他の場所では「ヘディング」と呼ばれる可能性があると思います。
  • Title:正直なところ、非常に一般的であり、その適度なサイズ(見出しや表示と比較して)のため、私が使用するスタイルの1つです。ほとんど:テキストブロックの上の場所で非常に役立ちます。たとえば、このタイトルに続くeulaテキストのタイトルとしての「Eula」、または著者リストの直前の「Authors」。 フレームワークでも広く使用されています です。
  • 小見出し:これはより具体的です。 「見出し」よりもすぐ下の程度であり、それに続くテキストブロックの抜粋、引用、または簡単な説明を提供するために使用されます。小見出しの例(見出しの例に続く):テキサス州知事の傷、マルクス主義者は殺害で非難された。マテリアルデザインでは、サイズが原因で、 私が見た最も一般的な場所は2つのアイテムリストのアイテムです です。これは、電子メールの抜粋として使用されているためです(概要を提供するため) )または電話番号(電話リストの特定の人物にとって最も重要な資産の詳細)として。
  • Body:本文。かなり明白。それらの中で最も読みやすいもの、および長いテキストのonlyオプション。
  • キャプション:脚注と小さなテキスト。印刷では、画像のキャプションとして広く使用されています。ホロでは、(よく分からないように)仕切りテキストとして使用されたと思います(すべて大文字)。マテリアルデザインでは、仕切りはキャプションテキストの使用をやめ、明るい色の「ボディ」を使用していると思います。

他のプログラムは、これら(一部、またはすべて)の概念自体をわずかに変更して使用します。

  • テキストプロセッサのテキストスタイル。
  • photoshop、Illustratorなどの画像ソフトウェアのフォント設定。
  • フォントの光学サイジング。たとえば、Adobeは "caption"、 "regular"、 "subhead"、および "display" を使用します。これは、ご覧のとおり、特にさまざまに調整されたフォントシェイプを使用して、サイジングとリーディングを補完することを目的としています。サイズスパン;

一般的な概念は、これらがテキストセットにおける重要度の勾配を表す抽象的なエンティティであり、使用されている限り、出版物間で柔軟なルールを持つことができるようです(= /// =)出版物、テーマ、アプリケーションなどで一貫している

問題2#:Androidでテキストの「先頭」スペースを追加するにはどうすればよいですか。

これは、TextViewsを 画像の例 のように(またはもちろんテキストスパンと)異なるスタイルと混在させる場所向けです。

正直に言いましょう。今、緊急の目的で、目を使って 重ね合わせたグリッド でリードを確認しています。最初のサイズから始めて、次のテキスト行のフォントサイズを差し引き、現在の行のディセンダーとして少しだけ差し引きます。次に、必要に応じて小さな光学調整を行います。これらの要素(x-height、cap height、descenderなど) 正確に計算できます であるといいのですが、私はまだこれに飛び込んでいません(しかし、おそらくそれは可能です)。レイアウトでMDを完璧にしていないのに、「アイメーター」に満足しています。

しかし、私がこれを見ただけでは(実際に試してみませんでした)、FontMetricsに飛び込んでフィールドを測定し、2つのTextViewsの間にその場で適切な寸法を適用できると思います。上に示しました。私は最初にそれを試します(次のascentと前のdescent)。

これは適切ですかAndroidガイダンスですか?

はい、そうです。とても。スタイルが異なる場合は、テキストを別のテキストの下に配置します。タイトルの後に本文が続くように、ワイルドな推測をしてみてください。それは機能せず、アプリはシステムと一貫していません。上記を参照。

問題#3:Robotoの最新バージョンをダウンロードしましたが、中程度のフォントは、Googleのエレガントでやや太い中程度のフォントとは対照的に、完全に太字に見えますが、フォントが実際にGoogleと異なることを確認するにはどうすればよいですか?

正確に比較する2つのサンプルを取得している場所を教えてください。フォントのレンダリングはさまざまな影響を受ける可能性があり、各システムは他の多くのものに加えて、独自のヒントアルゴリズムを使用します。 Robotoの異なるバージョンと異なるAndroid=バージョン間でさえ、わずかな違いがあります。通常のメディアと比較すると、媒体は「大胆」に見えますが、実際には大胆ではありません。

sdk/platforms/Android-[〜#〜] apiversion [〜#〜]/ data/fontsフォルダー。 Ubuntu 15.04でのレンダリング(わずかなヒント)、Android-22以降:

Roboto black

Roboto bold

Roboto medium

Roboto regular

Roboto light

Roboto thin

sample に従っていると思います。

広く入手可能なものと比較するために、これは buntuフォントファミリー (それぞれ、標準、中、太字)の(一部)です。私の意見では、mediumは通常よりも太字に近づいています。

Ubuntu regular

Ubuntu medium

Ubuntu bold

Minion Pro (レギュラー、ミディアム、セミ、ボールド)。おそらく太字のバリエーションもあるため、均等に加重されていますが、細かい印刷用に作られたセリフフォントについて話している。

Minion Pro regular

Minion Pro medium

Minion Pro semibold

Minion Pro bold

これがお役に立てば幸いです。

34
davidcesarino