Submit Search
Upload
フォントの選び方・使い方
•
120 likes
•
43,352 views
k maztani
Follow
京大マイコンクラブ(KMC) 春合宿2017 KMC Website: https://www.kmc.gr.jp/index.html
Read less
Read more
Design
Report
Share
Report
Share
1 of 122
Download now
Download to read offline
Recommended
はじめての欧文書体
はじめての欧文書体
Shohei Itoh
データサイエンティスト養成読本の解説+書き忘れたこと
データサイエンティスト養成読本の解説+書き忘れたこと
Tokoroten Nakayama
エスノグラフィーの実施手順
エスノグラフィーの実施手順
大輔 浅井
タクシーxAIを支えるKubernetesとAIデータパイプラインの信頼性の取り組みについて [SRE NEXT 2020]
タクシーxAIを支えるKubernetesとAIデータパイプラインの信頼性の取り組みについて [SRE NEXT 2020]
DeNA
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
Rakuten Group, Inc.
Isolation, Identification and Analysis of Phytoconstituents Terpenoids: Menth...
Isolation, Identification and Analysis of Phytoconstituents Terpenoids: Menth...
WASIM466660
エスノぶらりのすすめ
エスノぶらりのすすめ
大輔 浅井
【Unity道場 建築スペシャル2】点群ビジュアライゼーション
【Unity道場 建築スペシャル2】点群ビジュアライゼーション
UnityTechnologiesJapan002
Recommended
はじめての欧文書体
はじめての欧文書体
Shohei Itoh
データサイエンティスト養成読本の解説+書き忘れたこと
データサイエンティスト養成読本の解説+書き忘れたこと
Tokoroten Nakayama
エスノグラフィーの実施手順
エスノグラフィーの実施手順
大輔 浅井
タクシーxAIを支えるKubernetesとAIデータパイプラインの信頼性の取り組みについて [SRE NEXT 2020]
タクシーxAIを支えるKubernetesとAIデータパイプラインの信頼性の取り組みについて [SRE NEXT 2020]
DeNA
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
Rakuten Group, Inc.
Isolation, Identification and Analysis of Phytoconstituents Terpenoids: Menth...
Isolation, Identification and Analysis of Phytoconstituents Terpenoids: Menth...
WASIM466660
エスノぶらりのすすめ
エスノぶらりのすすめ
大輔 浅井
【Unity道場 建築スペシャル2】点群ビジュアライゼーション
【Unity道場 建築スペシャル2】点群ビジュアライゼーション
UnityTechnologiesJapan002
Industrial production sennosides
Industrial production sennosides
Dr. Rajasekhar reddy Alavala
社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみた
Iosif Takakura
ROS の活用による屋外の歩行者空間に適応した自律移動ロボットの開発
ROS の活用による屋外の歩行者空間に適応した自律移動ロボットの開発
Yoshitaka HARA
Isolation, identification and analysis of phytoconstituents
Isolation, identification and analysis of phytoconstituents
rekha bhalerao
tse - Pythonによるテキスト整形ユーティリティ
tse - Pythonによるテキスト整形ユーティリティ
Atsuo Ishimoto
理詰めスライド(色彩編)
理詰めスライド(色彩編)
Awoi Ebinuma
オペアンプとアナログ計算機
オペアンプとアナログ計算機
Toshiyuki Masui
一度死んだ話
一度死んだ話
Yutaka Kinjyo
3.2 B-Glycosides-Glycyrhetinic-acid-Rutin.pptx
3.2 B-Glycosides-Glycyrhetinic-acid-Rutin.pptx
WASIM466660
Semester V Unit 1 Study of utilization of radioactive isotopes in the investi...
Semester V Unit 1 Study of utilization of radioactive isotopes in the investi...
Dr. Amit Gangwal Jain (MPharm., PhD.)
Unit-III Pharmacognosy and Phytochemistry II.pdf
Unit-III Pharmacognosy and Phytochemistry II.pdf
Dr. Amit Gangwal Jain (MPharm., PhD.)
楽天のデータサイエンティスト@SAS Forum 2019
楽天のデータサイエンティスト@SAS Forum 2019
Rakuten Group, Inc.
Industrial production estimation and utilization of artemisinin
Industrial production estimation and utilization of artemisinin
Dr. SUFIYAN AHMAD
IoT自前導入のすすめ
IoT自前導入のすすめ
AmbientData
Industrial Production, Estimation and Utilization of the Phytoconstituents
Industrial Production, Estimation and Utilization of the Phytoconstituents
Dr. Siddhi Upadhyay
Large Scale Jirou Classification - ディープラーニングによるラーメン二郎全店舗識別
Large Scale Jirou Classification - ディープラーニングによるラーメン二郎全店舗識別
knjcode
Probabilistic Robotics: Chapter 6-7
Probabilistic Robotics: Chapter 6-7
Shintaro Shiba
Firebaseマーケティング活用事例
Firebaseマーケティング活用事例
Hiroshi Genouzono
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
完全版:「UI自動テストツールとAI」〜AIを使った自動テストの「今」と「未来」〜
完全版:「UI自動テストツールとAI」〜AIを使った自動テストの「今」と「未来」〜
Nozomi Ito
Webデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
Kunio Sakamoto
More Related Content
What's hot
Industrial production sennosides
Industrial production sennosides
Dr. Rajasekhar reddy Alavala
社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみた
Iosif Takakura
ROS の活用による屋外の歩行者空間に適応した自律移動ロボットの開発
ROS の活用による屋外の歩行者空間に適応した自律移動ロボットの開発
Yoshitaka HARA
Isolation, identification and analysis of phytoconstituents
Isolation, identification and analysis of phytoconstituents
rekha bhalerao
tse - Pythonによるテキスト整形ユーティリティ
tse - Pythonによるテキスト整形ユーティリティ
Atsuo Ishimoto
理詰めスライド(色彩編)
理詰めスライド(色彩編)
Awoi Ebinuma
オペアンプとアナログ計算機
オペアンプとアナログ計算機
Toshiyuki Masui
一度死んだ話
一度死んだ話
Yutaka Kinjyo
3.2 B-Glycosides-Glycyrhetinic-acid-Rutin.pptx
3.2 B-Glycosides-Glycyrhetinic-acid-Rutin.pptx
WASIM466660
Semester V Unit 1 Study of utilization of radioactive isotopes in the investi...
Semester V Unit 1 Study of utilization of radioactive isotopes in the investi...
Dr. Amit Gangwal Jain (MPharm., PhD.)
Unit-III Pharmacognosy and Phytochemistry II.pdf
Unit-III Pharmacognosy and Phytochemistry II.pdf
Dr. Amit Gangwal Jain (MPharm., PhD.)
楽天のデータサイエンティスト@SAS Forum 2019
楽天のデータサイエンティスト@SAS Forum 2019
Rakuten Group, Inc.
Industrial production estimation and utilization of artemisinin
Industrial production estimation and utilization of artemisinin
Dr. SUFIYAN AHMAD
IoT自前導入のすすめ
IoT自前導入のすすめ
AmbientData
Industrial Production, Estimation and Utilization of the Phytoconstituents
Industrial Production, Estimation and Utilization of the Phytoconstituents
Dr. Siddhi Upadhyay
Large Scale Jirou Classification - ディープラーニングによるラーメン二郎全店舗識別
Large Scale Jirou Classification - ディープラーニングによるラーメン二郎全店舗識別
knjcode
Probabilistic Robotics: Chapter 6-7
Probabilistic Robotics: Chapter 6-7
Shintaro Shiba
Firebaseマーケティング活用事例
Firebaseマーケティング活用事例
Hiroshi Genouzono
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
完全版:「UI自動テストツールとAI」〜AIを使った自動テストの「今」と「未来」〜
完全版:「UI自動テストツールとAI」〜AIを使った自動テストの「今」と「未来」〜
Nozomi Ito
What's hot
(20)
Industrial production sennosides
Industrial production sennosides
社内のマニュアルをSphinxで作ってみた
社内のマニュアルをSphinxで作ってみた
ROS の活用による屋外の歩行者空間に適応した自律移動ロボットの開発
ROS の活用による屋外の歩行者空間に適応した自律移動ロボットの開発
Isolation, identification and analysis of phytoconstituents
Isolation, identification and analysis of phytoconstituents
tse - Pythonによるテキスト整形ユーティリティ
tse - Pythonによるテキスト整形ユーティリティ
理詰めスライド(色彩編)
理詰めスライド(色彩編)
オペアンプとアナログ計算機
オペアンプとアナログ計算機
一度死んだ話
一度死んだ話
3.2 B-Glycosides-Glycyrhetinic-acid-Rutin.pptx
3.2 B-Glycosides-Glycyrhetinic-acid-Rutin.pptx
Semester V Unit 1 Study of utilization of radioactive isotopes in the investi...
Semester V Unit 1 Study of utilization of radioactive isotopes in the investi...
Unit-III Pharmacognosy and Phytochemistry II.pdf
Unit-III Pharmacognosy and Phytochemistry II.pdf
楽天のデータサイエンティスト@SAS Forum 2019
楽天のデータサイエンティスト@SAS Forum 2019
Industrial production estimation and utilization of artemisinin
Industrial production estimation and utilization of artemisinin
IoT自前導入のすすめ
IoT自前導入のすすめ
Industrial Production, Estimation and Utilization of the Phytoconstituents
Industrial Production, Estimation and Utilization of the Phytoconstituents
Large Scale Jirou Classification - ディープラーニングによるラーメン二郎全店舗識別
Large Scale Jirou Classification - ディープラーニングによるラーメン二郎全店舗識別
Probabilistic Robotics: Chapter 6-7
Probabilistic Robotics: Chapter 6-7
Firebaseマーケティング活用事例
Firebaseマーケティング活用事例
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
完全版:「UI自動テストツールとAI」〜AIを使った自動テストの「今」と「未来」〜
完全版:「UI自動テストツールとAI」〜AIを使った自動テストの「今」と「未来」〜
Viewers also liked
Webデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
Kunio Sakamoto
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
Yasunobu Ikeda
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
Leslie Samuel
Viewers also liked
(7)
Webデザインのための配色セオリー
Webデザインのための配色セオリー
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
色彩センスのいらない配色講座
色彩センスのいらない配色講座
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
フォントの選び方・使い方
1.
フォントの 選び方・使い方 2017.3.19 kmc-id: maztani 脱・野暮デザイン!
2.
自己紹介 kmc-id: maztani
(抹谷) 工学部電気電子工学科1回 一応 graphics に生息 Twitter: @k_maztani Pixiv: @maztani
3.
自己紹介(フォント) NF2016で フォントを出展した フォントの人と 覚えて下さい
4.
自己紹介(お絵かき) ベクタ絵も描いている すべてのストローク・塗りが独立 して存在しているので、後からの 編集が容易
解像度の悩みとおさらば みんなも Inkscape か Illustrator を 導入してベクタ絵を描こう!
5.
自己紹介(お絵かき) ベクタ絵も描いている すべてのストローク・塗りが独立 して存在しているので、後からの 編集が容易
解像度の悩みとおさらば みんなも Inkscape か Illustrator を 導入してベクタ絵を描こう!
6.
近況報告 最高に楽しい / UIデザインが綺麗で好き
7.
8.
ロゴGブラック ニタラゴ(改変)
9.
▲ ロダンNTLG(ニタラゴ) ◀ ロゴGブラック
10.
いい感じの デザイン
11.
いい感じのデザイン 作りたい
12.
いい感じのデザイン ゼロから己の手で 創り上げるのは無謀
13.
いい感じのデザイン
14.
いい感じのデザイン 良質なフォントを 適切に組めば、 優れたデザインが 生まれる
15.
0 はじめに 1 フォントを知る 2
フォントの選び方 3 フォントの使い方 目次
16.
Section フォントを知る 1
17.
フォントって何だ
18.
フォントって何だ 字形 + 様々な情報
19.
フォントって何だ 字形 + 様々な情報 これだけがフォントと思われがち
20.
フォントって何だ 字形 + 様々な情報 これだけがフォントと思われがち コレがとても重要
21.
フォントファイルが持つ主な情報 字形 ファミリー情報(ウェイト・イタリック)
サイドベアリング(左右の字間) リガチャー(合字)置換 ペアカーニング(特定2文字間の字詰め) 情報量が多いフォント = 良質なフォント
22.
Section フォントの選び方 2
23.
書体の分類を もとに選ぶ
24.
書体の分類を知る 書体の特徴によるグループ分けを知っていると、書体を選ぶ 際の助けになる 和文・欧文書体の主なジャンルを紹介します
25.
和文書体の分類
26.
和文書体の分類 「ウロコ」と呼ばれる飾り 縦横の線幅差
線の太さが均等 太さが均一 線端や角を丸く処理
27.
欧文書体の分類
28.
欧文書体の分類(基本) Roman Sans Serif Script
29.
欧文書体の分類(基本) Roman Sans Serif Script ブラック・レター 12–15世紀に使用された。 筆記の速さと単位面積当たり文字数の 多さが特徴。 現在では重厚感を表す場合によく使用 される。
30.
Roman Sans Serif Script 欧文書体の分類(基本) ローマン体 ブラックレター体の後に出現。 もともと古代ローマで使用されていた 大文字体と、神聖ローマ帝国で使用さ れたカロリング小文字体を起源に持つ。
31.
【参考】トラヤヌス帝の碑文
32.
【参考】トラヤヌス帝の碑文 トラヤヌス記念柱の台座に刻まれた碑文。 ローマ皇帝トラヤヌスのダキア戦争勝利を記念したもの。
西暦113年完成。
33.
【参考】トラヤヌス帝の碑文 元老院とローマ市民は皇帝カエサル、神聖なネルウァの息子、ネルウァ・トラ ヤヌス・アウグストゥス・ゲルマニクス・ダキウス、最高神祇官、17歳にして 護民官になった者、6回インペラトルとして賞賛された者、6回執政官になった 者、国民の父に、この丘がどんな高みだったかを示し、この素晴らしい作品の ために取り除かれた場所を示すために(これを与えるか、または捧げる)
34.
【参考】カロリング小文字体 9 –
13世紀、神聖ローマ帝国 (フランク王国)で使用された。 規律ある丸みを帯びた字形。 字が区別しやすく可読性が高い。 単語間にスペースが設けられた。
35.
【参考】Roman体の出現 Imperial Capital Carolingian Minuscule 9C 8 B.C.
36.
【参考】Roman体の出現 Imperial Capital Humanist Capital Carolingian Minuscule Humanist Minuscule ルネサンス (15C) 9C 8 B.C.
37.
【参考】Roman体の出現 Imperial Capital Humanist Capital Carolingian Minuscule Humanist Minuscule ルネサンス (15C) Venetian Roman 9C 8 B.C. スピラ兄弟
38.
【参考】Roman体の出現 Imperial Capital Humanist Capital Carolingian Minuscule Humanist Minuscule ルネサンス (15C) Venetian Roman 9C 8 B.C. Pre Roman スピラ兄弟
39.
【参考】Roman体の出現 Imperial Capital Humanist Capital Carolingian Minuscule Humanist Minuscule ルネサンス (15C) Venetian Roman A.D. 9 8
B.C. Pre Roman スピラ兄弟 ニコラ・ジェンソン
40.
Roman Sans Serif Script 欧文書体の分類(基本) サンセリフ体 19世紀初頭に出現。 初めは見出しなど限られた場面でしか 使われなかったが、現在では様々な書 体・ウェイトが開発され、本文での使 用も多い。
41.
Roman Sans Serif Script 欧文書体の分類(基本) スクリプト体 所謂「手書き文字」である。 カリグラフィーで使用される書体がこ こに分類される事が多い。
42.
Roman 体の分類
43.
Roman体の分類 Roman RomanRoman RomanRomanRoman ルネサンス期以降、 時代に合わせてスタイルが変化してきた
44.
1. Venetian Roman
(15c) アクシス(”o”の最細部を結んだ線)が左に傾斜している “e” 横棒が右肩上がり セリフが太め 特徴 http://typetuto.jp/column/ローマン体の歴史
45.
2. Old Roman
(15–18c) アクシス(”o”の最細部を結んだ線)が左に傾斜している “e” 横棒が水平になった 大文字と小文字のデザインに、より統一感が生まれた 特徴
46.
Transitional Roman 3. Transitional
Roman アクシスが垂直、またはわずかに傾斜している “e” 横棒が水平 ベースラインと接するセリフが横一直線 特徴
47.
Modern Roman 4. Modern
Roman (18c–) 縦横のストローク幅の差が大きい アクシスが垂直 セリフはヘアライン・セリフ 特徴
48.
Roman 体の選び方 古さ・新しさの度合いは、各時代のRoman
体のスタイルに対 応している Venetian Roman は使い所が難しいかも 本文:Old Roman または Transitional Roman が最適 タイトル:Modern Roman の美しさが映える場面。Old Roman や Transitional Roman でも良い
49.
Sans Serif 体の分類
50.
Grotesque 1. Grotesque (1890
頃 – ) 微妙に太さの差が目につき、野暮ったい印象を与える 曲線の先端は斜めにカットされ、小文字の “g” は2階建て 最初期のSans Serif 体ゆえ、古さを表現したいときに適する 特徴
51.
【参考】小文字の “g” 小文字の “g”
には2種類ある
52.
【参考】小文字の “g” 1階建て single-story 2階建て double-story
53.
【参考】小文字の “a” 1階建て single-story 2階建て double-story
54.
Geometric 2. Geometric (1920
頃 – ) 直線・真円で構成された印象を与える 急速に工業化する近代社会を反映した機械的・人工的な造形 可読性に劣るが、見出し・短文に適する 特徴
55.
Neo Grotesque 3. Neo
Grotesque (1957 頃 – ) 初期 Grotesque よりストロークが洗練され、字幅が広い 曲線の先端は垂直・水平にカットされ、小文字 ”g” が1階建て 現在最も標準的な Sans Serif 体と言ってよい 特徴
56.
Humanist 4. Humanist Roman
の骨格を残した造形だが、ストローク幅は均一 “c” などの開口部が広い 可読性が高く、本文書体や公共サインによく使用される 特徴
57.
書体の持つ印象 ウェイト編
58.
書体の持つイメージ(和欧共通) 力強さ・信頼・安心 柔和さ・洗練・知的 Sans Serif,
ゴシック Roman, 明朝体 A永 A永
59.
書体の持つイメージ(和欧共通) 力強さ・信頼・安心 柔和さ・洗練・知的 Sans Serif,
ゴシック Roman, 明朝体 A永 A永
60.
書体の持つイメージ(和欧共通) 力強さ・信頼・安心 柔和さ・洗練・知的 太い書体 細い書体 A永
A永
61.
書体の持つ印象 ふところ編
62.
現代風・古風な書体の違いとは 和文書体で現代風と古風のデザイン差をどう表現する?
63.
「ふところ」の締まり具合に注目 ふところ:画と画が構成している内側の空間のこと 現代風 古風 広
狭
64.
【参考】さっきのフォント一覧
65.
【参考】さっきのフォント一覧
66.
【参考】さっきのフォント一覧 ¥5,000 / 4年
67.
使うべきでない フォントを知る
68.
使うべきでないフォント フォントを否定するわけではないが、扱いづらいフォント・ 機能に乏しいフォントは存在する 使うべきでないフォントを知って、効率よくフォント選びを するべし
69.
避けた方が 良いフォント 【和文編】
70.
避けるべきフォント① 曲線がぎこちなく、グリフによって線の太さがまちまち 画面表示に特化しているため、印刷時に品質を保てない
太字が存在せず、疑似ボールド処理が成される MS ゴシック 理由
71.
【参考】疑似ボールド 通常ウェイト書体の縁取りで擬似的に太字を表現すること あ鬱 あ鬱 筑紫ゴシック MS ゴシック
72.
【参考】疑似ボールド 画数の多い文字に擬似ボールド処理すると潰れてしまう 筑紫ゴシック MS ゴシック あ鬱 あ鬱
73.
【参考】疑似ボールド 鬱鸞 筑紫ゴシック H MS ゴシック 疑似ボールド
74.
避けるべきフォント① かな・漢字のバランスが悪く、洗練されていない 画面表示に特化しており、印刷時に品質を保てない
太字が存在せず、疑似ボールド処理が成される MS 明朝 理由
75.
避けるべきフォント① UI用途のため、MSゴシックの かな
を 2/3 に縮めたせいで、 かな文字の美しさを完全に無視したデザインを持つ もちろん太字は存在しない MS UI Gothic 理由
76.
避けるべきフォント① UI用途のために、MSゴシックの かな
を 2/3 の幅に縮めたせ いで、かな文字の美しさを完全に無視したデザインを持つ もちろん太字は存在しない 夏でも底に冷たさを 理由
77.
避けた方が 良いフォント 【欧文編】
78.
避けるべきフォント① イタリック体・ボールド体が実装されていない オブリーク・疑似ボールド体になってしまう
書体デザインそのものは素晴らしい Century 理由
79.
【参考】Century のなかま① イタリックとボールドが揃った Century
Schoolbook を選ぶと良い Century Schoolbook Century Type Type Type Type
80.
避けるべきフォント① 和文フォントに収録されたラテン文字を従属欧文という あくまでオマケ扱いのものが多く、欧文フォントとして使用 するにはあまりにも力不足である 従属欧文 理由
81.
【参考】従属欧文いろいろ MS ゴシック MS 明朝 HG
丸ゴシック M-PRO
82.
【参考】従属欧文いろいろ 游ゴシック ヒラギノ角ゴシック ヒラギノ明朝 Typography Typography Typography
83.
王道フォント
84.
Windows の場合【欧文】 Segoe UI Neue
Haas Grotesk Times New Roman
85.
Mac の場合【欧文】 Helvetica Neue Avenir
Next Didot
86.
Windows の場合【和文】 游ゴシック 游明朝
87.
Mac の場合【和文】 ヒラギノ角ゴシック ヒラギノ明朝
88.
フリーフォント【欧文】 フリーフォントなのに、OpenTypeFontの機能が満載 多数のリガチャー 豊富なペアカーニング
スウォッシュ字形
89.
フリーフォント【和文】
90.
Section フォントの使い方 3
91.
適切にカーニングを施す
92.
カーニング “Tech” と組んだ。良くない点はどこか
93.
カーニング “T” と “e”
の間が空きすぎている
94.
カーニング 字面幅を保ったまま詰めても、間隔が空いているように見える
95.
カーニング 適切な詰め具合に修正したもの
96.
カーニング 文字の組み合わせによっては、 字面幅以上に食い込ませる必要がある
97.
カーニングとは 主に欧文の組版において、プロポーショナルフォントの文字 同士の間隔(アキ)を調整する技法 カーニングなし:文字間に不自然な空隙を招く
カーニングあり:字面間の空白の面積が均等になる 和文(横組み)の場合、見出しにカーニングを用いる ○ 仮名は縦組みベタで綺麗に並ぶ設計
98.
カーニングを施す箇所
99.
和文も同じです
100.
リガチャーで可読性UP
101.
リガチャー “Office” と組んでみた 不格好な点はどこでしょうか
102.
リガチャー “f” と “i”
が重なって不自然な「黒み」が出てしまう
103.
リガチャー “f” と “i”
が重なって不自然な「黒み」が出てしまう
104.
リガチャー “ffi” を1つの文字としてデザインされた 「リガチャー」に置換する
105.
リガチャー “f” の先端と “i”
の点が統合されたデザイン “ffi” すべての横棒が共通化されている
106.
リガチャー機能を使うには ワープロソフトだと、「標準合字」または「任意の合字」が 表示されるように設定する グラフィックソフト
(Illustrator 等) では「fi」ボタン等でリガ チャーに置換できる ソフトウェアによっては自動置換に対応していなかったりす るので、IME のワードパッド等から手動で合字を挿入する
107.
約物を正しく使う
108.
約物ってなんだ 約物 (punctuation mark)
言語の記述に使用する記述記号類の総称
109.
アポストロフィと 引用符の正しい使い方
110.
アポストロフィ・引用符 アポストロフィ (apostrophe) 文字を省略したことを表す欧 文約物の一つ 引用符 英語・ドイツ語・ポーランド 語などで使用される引用符
111.
アポストロフィ・引用符 アポストロフィ (apostrophe) 文字を省略したことを表す欧 文約物の一つ 引用符 英語・ドイツ語・ポーランド 語などで使用される引用符
112.
アポストロフィ・引用符 アポストロフィ (apostrophe) 文字を省略したことを表す欧 文約物の一つ 引用符 英語・ドイツ語・ポーランド 語などで使用される引用符
113.
区別しよう アポストロフィ・引用符とプライムは全くの別物である アポストロフィ・引用符 プライム
114.
Hyphen En dash Em dash
115.
3つの違いがわかりますか? HYPHEN EM DASHEN
DASH - —– すべて Hyphen で済ませてしまってはダメ!
116.
Hyphen 使用箇所 複合語を作る場合 eg)
mid-term 紙面デザインの都合上、行末の単語を音節で区切る場合 注意 基本的にハイフンの前後にスペースは入らない
117.
En dash 使用箇所 範囲・期間を表す
eg) 10:30 a.m. – 2:00 p.m. 入力方法 Windows: Alt + 0150 Mac: option + “- (hyphen)” テンキー入力でないと 反応しないので注意
118.
Em dash 使用箇所 挿入・引用 入力方法
Windows: Alt + 0151 Mac: option + shift + “- (hyphen)” テンキー入力でないと 反応しないので注意
119.
Alt キーコード Windows
で利用できる Alt キーとテンキーを組み合わせた文 字入力方法 字形 コード 字形 コード 字形 コード £ 0163 Æ 0198 – 0150 ¢ 0162 æ 0230 — 0151 € 0128 ß 0223 ¤ 0164 Œ 0140 œ 0156
120.
まとめ 良質なフォントを選ぶ 分類を知って書体のもつ雰囲気を掴む 約物を正しく使う リガチャー置換を施す カーニングを施す
121.
参考文献 中央図書館にあった書体の歴史的な本(名前忘れた) typetuto.jp/column/ローマン体の歴史
typetuto.jp/column/サンセリフ体の歴史 www.kinkido.net/Europian/resume-ouji.html 「『左 Alt キー + 数字キー』による特殊文字入力」 www2.kobe-u.ac.jp/~tmarutcm/album/specialcharacters.pdf
122.
お疲れ様でした
Download now