デジタル地図タイポグラフィーの黄金律
インタラクティブな地図上のタイポグラフィーは、迅速な空間認識という 1 つの主要な使命を果たします。編集本文とは異なり、地図ラベルは、公園の緑の草から暗いアスファルト道路や建築物のハッチに至るまで、複雑な多色の背景画像に対しても読みやすくなければなりません。
中程度から太字の、すっきりとした幾何学的なサンセリフ書体 (Inter、Roboto、SF Pro など) を使用します。高解像度のディスプレイでは消えてしまう繊細な細いセリフ フォントは避けてください。
常に、微妙な背景の丸薬またはテキストのハロー (柔らかいコントラストの輪郭) を適用します。白いテキストの背後にあるきれいな暗いバッジ、または暗いテキストの背後にある白い錠剤は、その下にどのような背景アートワークがあるかに関係なく、100% の可読性を保証します。
- 1ラベルには、半太字または太字の太さのきれいなサンセリフ タイポグラフィを使用します。
- 2テキストの後ろにコントラストのバッジ錠剤を適用して、複雑なアートからラベルを分離します。
- 3ラベルのコピーは簡潔にしてください。「Central Campus Dining and Catering Hall」ではなく「Dining Hall」です。
ズームレベル全体で明確な視覚的階層を確立する
すべてのマップ アイテムが同じように作成されているわけではありません。マスター プランには、主要な地区、二次的な建物、および小規模な公共施設が含まれます。
3 段階のタイポグラフィ スケールを確立します。第 1 層 (地区/ウィング) は 16 ～ 18 ピクセルの太字の大文字で表示されます。 Tier 2 (建物/店舗) 13 ～ 14 ピクセルの半太字テキスト。 Tier 3 (アメニティ/トイレ) は、アイコン付きのコンパクトな 11 ～ 12 ピクセルのバッジです。
Layerpin を使用すると、ズームに依存するラベルの可視性を設定でき、視覚的なノイズを防ぐために鳥瞰図でマイナーな部屋ラベルが非表示のままになり、訪問者がズームインすると優雅にフェードインします。
- 1ランドマークや目的地に視覚的な階層を割り当てます。
- 2大きなゾーンには大文字の追跡テキストを使用し、特定の部屋には大文字を使用します。
- 3マイナー ラベルが近いズーム レベルでのみ表示されるようにズームしきい値を構成します。
アクセシブルでインタラクティブな地図の凡例をデザインする
マップの凡例は、レイアウトの視覚的なロゼッタ ストーンです。ピンの色、カテゴリアイコン、形状の塗りつぶしを理解可能な意味に変換します。
Layerpin では、凡例は静的なグラフィックではなく、対話型のコントロールです。凡例の [トイレ] をクリックすると、キャンバス上のすべてのトイレの場所がフィルタリングされ、ハイライト表示されます。
カテゴリの色を選択するときは、WCAG AA アクセシビリティ ガイドラインに従ってください。カテゴリを区別するために色だけに依存しないでください。色盲の訪問者が完全に自信を持ってナビゲートできるように、色と特徴的な形やアイコンを常に組み合わせてください。