SlideShare une entreprise Scribd logo
1  sur  78
Télécharger pour lire hors ligne
KMC Font Project
2016 #1
2016.7.31 Sun. id: maztani
Font 制作・Typeface Design の基本
事前準備
Inkscape のインストール
○https://inkscape.org/ja/
マウスの準備
自己紹介
id: maztani (抹谷)
工学部電気電子工学科1回
一応 graphics に生息
Twitter: @k_maztani
Pixiv: @maztani
近況報告
Glyphs 欲しい
○Mac 専用のフォントエディタ
ペンタブとIllustrator買うぞ!!
髪を切りたい
8/5 誕生日
https://glyphsapp.com/content/icon-glyphs-2.png
Section
プロジェクトの概要
1
KMC Font Project
フォントを作るプロジェクト
書体制作のノウハウを得る
ベジエ曲線に親しむ
目標
NF
Comiket
使ってもらおう
フリーフォントとして配布する
売って稼ぐ
いい感じの配布サイトを作るのも良さそう
進捗を生む方法
頑張る
ゆるいプロジェクトなので締め切りは無いです
今年のNF・コミケでなくてもいいんじゃない?
Section
フォント制作の流れ
2
お世話になるソフト
Inkscape
SVG を描く
Illustrator代替
無料
https://commons.wikimedia.org/wiki/File:Inkscape_logo_2.svg
https://github.com/fontforge/fontforge
FontForge
TTFフォントを作る
既存のフォントの修正
無料
どうやって作るの
Inkscapeでアウトライン描く
○プレーンSVGで一文字ずつ出力
FontForgeでフォントを作る
○アウトラインの取り込み
○文字幅設定(サイドベアリング調整)
○ペアカーニングと合字の設定
○フォントを出力
完成
大まかな流れ
だいたい左記に沿って進む
用語などは
そのうち説明します
(たぶん)
どうやって作るの
Inkscapeでアウトライン描く
○プレーンSVGで一文字ずつ出力
FontForgeでフォントを作る
○アウトラインの取り込み
○文字幅設定(サイドベアリング調整)
○カーニングの設定
○TrueType形式で出力
完成
自動化できれば楽
詳細:アウトライン描き
FontForgeに読み込ませる関係上、1000px × 1000px のキャン
バス上で作る
FontForgeはベジエ曲線が扱いにくいので、この段階で完成さ
せてしまい、後から修正があまり出ないように
○1文字の中でのパーツは別々でも良い
○FontForgeでのパーツ結合が簡単/万一の修正のため
詳細:アウトライン描き
尖った角、鋭い谷は丸める
○フォントファイルに出力した際、意図しない線が現れる危険がある
フォント制作の流れ
以上を踏まえればOK
あとは試行錯誤でフォントはできる
Section
Inkscapeの扱い方
3
イラストソフトをマスターするべし
試行錯誤でフォントができると言っても、ツールの扱いに慣れ
ていないと極めて非効率
文字のデザインに最も時間がかかる
イラストソフトの扱いに慣れていれば仕事が捗る
マスターしましょう
注意
Inkscapeを例に説明します
Illustrator等は適切な表現に読み替えてください
パス
自由に形状を変形できる線や図形
パスはオープンパスとクローズドパスに大別される
パスは一連のベジエ曲線によって構成される
オープンパス クローズドパス
塗りつぶしの
挙動
ベジエ曲線
ノード(エンドポイント)とハンドル(コントロールポイン
ト)で構成される
○ノード:パスが絶対に通る点
○ハンドル:ノード周りにおけるパスの方向と曲がり具合を決定
ノードの種類
スムーズポイント: ■
コーナーポイント: ◆
ハンドル無し スムーズポイント コーナーポイント
パスの書き方
1. 始点位置で左クリック&ドラッグしてハンドルを調整
2. 次ノード位置で左クリック&ドラッグ、後方ハンドルを調整
3. Shiftで後方ハンドルを固定、前側ハンドルをドラッグで調整
4. 終点位置で左クリック&ドラッグしてハンドルを調整
5. 右クリックで終了
パスの書き方
1. 始点位置で左クリック&ドラッグしてハンドルを調整
2. 次ノード位置で左クリック&ドラッグ、後方ハンドルを調整
3. Shiftで後方ハンドルを固定、前側ハンドルをドラッグで調整
4. 終点位置で左クリック&ドラッグしてハンドルを調整
5. 右クリックで終了
習うより慣れる!
ハンドル操作を極めよ
キー操作を使いこなす
ノードからハンドルを引き出す:Shift + ドラッグ
ハンドルを一定角度にスナップ:Ctrl
ハンドルを折る:
はじめにノードだけ設置し、後からハンドルを引き出す描き方
でもOK
Shift
Ctrl
Shift
演習 01|オープンパスで文字を描こう
フィルではなくストロークで文字の骨格を描いてください
文字の太さはストロークの太さで調節します
ファイル > ドキュメントのプロパティ にてキャンパスサイズ
を 1000px × 1000px に設定してください
課題
あ gor or
演習 01|オープンパスで文字を描こう
コツ
最も急なカーブの両脇にノードを置くと調整しやすい
ノード数はなるべく少なめに
課題
あ gor or
ハンドル操作は練習あるのみ
The Bézier Game
http://bezier.method.ac/#
ベジエ曲線の練習ができる
ゲーム
キー操作はIllustrator準拠
Section
Typeface の基礎知識
4
書体
それぞれの字体が
一貫した特徴と独自の様式を備えた字形
として表現されている文字の集まり
デザインによる分類(和文)1
縦横で線の太さが異なる
ウロコと呼ばれる飾りがある
すべての線が均一な太さ
先端が角張っている
すべての線が均一な太さ
先端が丸い
デザインによる分類(和文)2
教科書体 教科書で使用。点画が様式化されていない
宋朝体 中国では明朝体と並んで正式な文書に使用
楷/行/草書体 書道における各書法に則った書体
隷書体 扁平な字形が特徴
手書き書体 比較的制作が容易で、バリエーションに富む
デザイン書体 さまざまなコンセプトの下に制作された書体
デザインによる分類(欧文)
線の強弱がある
セリフと呼ばれる飾りがある
すべての線が均一な太さ
セリフがない
サンセリフの線端を丸く処理
いわゆる手書き系書体
カリグラフィー由来が多い
サンセリフ体の分類
: グロテスク
: ネオ・グロテスク
: ヒューマニスト
: ジオメトリック
ローマン体の分類
: オールドフェイス
: モダンフェイス
: トランジショナル
: スラブセリフ
セリフによる分類(欧文ローマン体)
ヘアライン ブラケット スラブ Clarendon
Clarendon をスラブセリフから
独立させて考える派閥もある
参考|Clarendon
ウェイトによる分類
Ultra Light
Extra Light
Light
Regular
Demi Bold
Bold
Heavy
Black
Extra Bold
Ultra Bold
細
太
10段階
Light
Regular
Demi
Bold
Heavy
Black
細
太
6段階
ワイドによる分類
欧文では、文字幅の異なる同一書体を制作する場合が多い
近年、文字幅の展開を取り入れた和文書体が登場
e.g.) AXIS フォント/UD新ゴ/UD角ゴ
サンセリフ体(ゴシック体)のみの概念
斜体による分類
斜体変化を
かけていない状態
正体 イタリック オブリーク
一部の字形に
変化がある
正体をそのまま
傾けただけ
ウェイト・ワイド・斜体 による書体展開
ウェイト・ワイド・斜体 による書体展開
フォントファミリーとは
書体のデザイン方針を維持したまま、様々なウェイト・スタイ
ルに展開したフォント群
○太字・斜体を揃えるだけでも、立派なフォントファミリーです
コンセプトを維持したまま、ゴシック体から明朝体まで展開し
たフォント群は、フォントシリーズと呼んだりする
e.g.) 筑紫書体シリーズ
和文の基準線
仮想ボディが隙間なく並ぶ
文字は字面枠いっぱいにデザインする
仮想ボディと字面枠の大きさの比率が書体の個性に繋がる
仮想
ボディ 字面枠
欧文の基準線
① ボディサイズ ② アセンダライン
③ キャップライン ④ Xハイト
⑤ ベースライン ⑥ ディセンダライン
欧文の基準線
ボディサイズ(①)に対する
Xハイト(④)の比率が書体の個性に大きく関わる
Section
Typeface Design の基本
和文書体編
5
和文活字の二大潮流
秀英体 築地体
http://www.screen.co.jp/ga_product/sento/pro/typography/05typo/pdf/051_shogo.pdf
http://morisawa-resources.s3.amazonaws.com/uploads/ung/font_family/set_sample_file/109/ShueiShogo.pdf
和文活字の二大潮流
秀英体
大日本印刷の前身、秀英舎の時代
から開発が続く
明治45年に初号~八号の活字が
揃った
重厚さとしなやかな強さ
左の例は秀英初号明朝
和文活字の二大潮流
築地体
東京築地活版製造所で開発
かな書体
角寸法 14.76mm を最大まで使っ
たデザイン
柔らかく、力強い筆致
右の例は築地体初号仮名
和文活字の二大潮流
特に明朝体を制作するときは、
この2書体に対する立ち位置を意識すると良いかも
和文書体デザインのテクニック
1. 角立て
2. 食い込み
3. ふところ
4. ポゲンドルフ錯視
5. フィック錯視
視覚調整
1. 角立て
元は写植のテクニック
写植は角が甘く出力されるため、
メリハリを維持するための手法
デジタルフォントでも、メリハリ
を付ける手段として採用
デジタルフォントでは角が立ちす
ぎるという問題も
2. 食い込み
これも写植で多用された
多数の線が交差するところは、黒
く潰れがち
谷の部分を強く食い込ませること
で、黒みを低減
3. ふところの調整
モダン/レトロ:どうやって違いを出す?
ふところ = 画と画が構成している内側の空間
モダン レトロ
広 狭ふところ
4. フィック錯視
問題
水平方向の線分と鉛直方向の線
分、どちらが長い?
4. フィック錯視
問題
水平方向の線分と鉛直方向の線
分、どちらが長い?
解答
どちらも同じ長さ
4. フィック錯視
問題
水平方向の線分と鉛直方向の線
分、どちらが長い?
解答
どちらも同じ長さ
……鉛直方向が長く見える
4. フィック錯視への対策
ゴシック体の場合、縦横の線を均一な太さに見せるためには、
横線を若干細くする
数値的な正確さよりも、「人間の目にはどう見えるか」という
観点が重要
5. ポゲンドルフ錯視
問題 1
左下の線分を伸ばすと1~4のどれに
対応する?
5. ポゲンドルフ錯視
問題 1
左下の線分を伸ばすと1~4のどれに
対応する?
解答
2番
5. ポゲンドルフ錯視
問題 2
左下の線分と滑らかに繋がるように
見せるためには、1~4のどれを選ぶ
べきか?
5. ポゲンドルフ錯視
問題 2
左下の線分と滑らかに繋がるように
見せるためには、1~4のどれを選ぶ
べきか?
解答
3番
真実 ≪ 事実
5. ポゲンドルフ錯視への対策
斜めに線が交差する部分では、斜めの線をぶった切ってずらす
視覚調整とは
人間の視覚は、想像以上に不正確
タイプフェイスは人間に眺められるもの
数値的には正確だが、眺めると違和感 → ✕
数値的には不正確だが、眺めても自然 → ○
とにかく、「どう見えるか」が重要
眺めたときの違和感を減らす調整 = 視覚調整
Section
Typeface Design の基本
欧文書体編
6
欧文書体デザインのテクニック Part 1
1. 基準線の飛び出し
2. 合字
3. クロソイド曲線
4. フィック錯視
5. ポゲンドルフ錯視
視覚調整
1. 基準線の飛び出し
曲線や鋭利な角は基準線を少し飛び出す
Xハイト・ベースライン・キャップラインいずれも当てはまる
大文字も同様
2. 合字
f と i の頭が近すぎて窮屈
f, f, i の横線に微妙な間隙
合字なし 合字あり
3文字 f, f, i を1つのグリフに
まとめてしまう
2. さまざまな合字
3. クロソイド曲線とは
曲率半径 R
クロソイド始点からの曲線長 L
R L =(一定)
原点から進むほど曲率半径が小
さくなっていく
https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AD%E3%82%BD%E3%82%A4%E3%83%89%E6%9B%B2%E7%B7%9A#/media/File:Clothoid_curve.svg
3. クロソイド曲線を意識した例
曲がり方が不自然 曲がり方が自然
真円を用いた クロソイドを意識した
3. クロソイド曲線を意識すべし
厳密なクロソイド曲線である必要は無い
曲率半径を徐々に変えていくことが重要
「とりあえず円くっつけといたろww」ダメ、ゼッタイ。
ダメ、ゼッタイ。を実践した例
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/GU_logo.svg/600px-GU_logo.svg.png
3. 真円+直線はなぜ不自然か
曲率半径 +∞
曲率半径 R
曲率半径の値が連続でないから
4. フィック錯視への対策
和文と同様
横線は若干細くする
5. ポゲンドルフ錯視への対策
線がずれて見える
交差部が厚ぼったい
線が繋がった
交差部がすっきり
5. ポゲンドルフ錯視への対策
2つを重ねた
ポゲンドルフ錯視対策のため、少し
ずらしている
食い込み処理も同時に行なっている
調整の程度は目で見て確認
本日はお疲れ様でした
次回:未定(9月頃?)
夏休みはフォントを作るぞ―!!

Contenu connexe

Tendances

Windows 8 UX Guidelines
Windows 8 UX GuidelinesWindows 8 UX Guidelines
Windows 8 UX GuidelinesTakaaki Suzuki
 
C#のココが好き!
C#のココが好き!C#のココが好き!
C#のココが好き!Takaaki Suzuki
 
デ部会 女子部 20170329
デ部会 女子部 20170329デ部会 女子部 20170329
デ部会 女子部 20170329Masami Kanemoto
 
.NET Standard で SQLServer と接続してみた
.NET Standard で SQLServer と接続してみた.NET Standard で SQLServer と接続してみた
.NET Standard で SQLServer と接続してみたm ishizaki
 
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有するkazuki matsumura
 
Cod2012 デバッグ講座
Cod2012 デバッグ講座Cod2012 デバッグ講座
Cod2012 デバッグ講座Masuda Tomoaki
 
Web開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経ったWeb開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経ったkazuki matsumura
 
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったことReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったことkazuki matsumura
 
スクリプト・プログラマー宣言
スクリプト・プログラマー宣言スクリプト・プログラマー宣言
スクリプト・プログラマー宣言kanemu
 
【2017早めの夏休み自由研究】SPAとサーバーレスについて
【2017早めの夏休み自由研究】SPAとサーバーレスについて【2017早めの夏休み自由研究】SPAとサーバーレスについて
【2017早めの夏休み自由研究】SPAとサーバーレスについてkazuki matsumura
 
Vs2019 を試してみる会
Vs2019 を試してみる会Vs2019 を試してみる会
Vs2019 を試してみる会m ishizaki
 
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャマークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ力也 伊原
 
コードに基づくモデルによる IntelliCode
コードに基づくモデルによる IntelliCodeコードに基づくモデルによる IntelliCode
コードに基づくモデルによる IntelliCodem ishizaki
 
Ruby Kaigi LT - unshiu
Ruby Kaigi LT - unshiuRuby Kaigi LT - unshiu
Ruby Kaigi LT - unshiugaooh
 

Tendances (15)

Windows 8 UX Guidelines
Windows 8 UX GuidelinesWindows 8 UX Guidelines
Windows 8 UX Guidelines
 
C#のココが好き!
C#のココが好き!C#のココが好き!
C#のココが好き!
 
デ部会 女子部 20170329
デ部会 女子部 20170329デ部会 女子部 20170329
デ部会 女子部 20170329
 
.NET Standard で SQLServer と接続してみた
.NET Standard で SQLServer と接続してみた.NET Standard で SQLServer と接続してみた
.NET Standard で SQLServer と接続してみた
 
Rnyoutube
RnyoutubeRnyoutube
Rnyoutube
 
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
 
Cod2012 デバッグ講座
Cod2012 デバッグ講座Cod2012 デバッグ講座
Cod2012 デバッグ講座
 
Web開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経ったWeb開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経った
 
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったことReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
 
スクリプト・プログラマー宣言
スクリプト・プログラマー宣言スクリプト・プログラマー宣言
スクリプト・プログラマー宣言
 
【2017早めの夏休み自由研究】SPAとサーバーレスについて
【2017早めの夏休み自由研究】SPAとサーバーレスについて【2017早めの夏休み自由研究】SPAとサーバーレスについて
【2017早めの夏休み自由研究】SPAとサーバーレスについて
 
Vs2019 を試してみる会
Vs2019 を試してみる会Vs2019 を試してみる会
Vs2019 を試してみる会
 
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャマークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
 
コードに基づくモデルによる IntelliCode
コードに基づくモデルによる IntelliCodeコードに基づくモデルによる IntelliCode
コードに基づくモデルによる IntelliCode
 
Ruby Kaigi LT - unshiu
Ruby Kaigi LT - unshiuRuby Kaigi LT - unshiu
Ruby Kaigi LT - unshiu
 

Similaire à KMC Font Project 1 - フォント製作・Typeface Designの基本

クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜Takuya Oikawa
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
ゼロから深層学習を学ぶ方法 - CMS大阪夏祭り2017
ゼロから深層学習を学ぶ方法 - CMS大阪夏祭り2017ゼロから深層学習を学ぶ方法 - CMS大阪夏祭り2017
ゼロから深層学習を学ぶ方法 - CMS大阪夏祭り2017Tomo Masuda
 
C#でアプリを作ってみよう! #ngtnet
C#でアプリを作ってみよう! #ngtnetC#でアプリを作ってみよう! #ngtnet
C#でアプリを作ってみよう! #ngtnet将 高野
 
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -Miho Yamamori
 
Computer Vision と Translator Text API 使ってみた
Computer Vision と Translator Text API 使ってみたComputer Vision と Translator Text API 使ってみた
Computer Vision と Translator Text API 使ってみたYoshito Tabuchi
 
ATEMスイッチャーSDKを使用したライブ動画配信用制作・送出システムの開発
ATEMスイッチャーSDKを使用したライブ動画配信用制作・送出システムの開発ATEMスイッチャーSDKを使用したライブ動画配信用制作・送出システムの開発
ATEMスイッチャーSDKを使用したライブ動画配信用制作・送出システムの開発Eiji KOMINAMI
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
Visual Studio Code のこれまでとこれから at OSC 2021 Online/Spring
Visual Studio Code のこれまでとこれから at OSC 2021 Online/SpringVisual Studio Code のこれまでとこれから at OSC 2021 Online/Spring
Visual Studio Code のこれまでとこれから at OSC 2021 Online/SpringIssei Hiraoka
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフローAsami Yamamoto
 
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editorデザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme EditorAsami Yamamoto
 
カスタマーマーケティングMeetup vol.6 パネルディスカッション
カスタマーマーケティングMeetup vol.6  パネルディスカッションカスタマーマーケティングMeetup vol.6  パネルディスカッション
カスタマーマーケティングMeetup vol.6 パネルディスカッションAkiko Nagahashi
 
わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門Yasuhiko Yamamoto
 
BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介Yoshito Tabuchi
 
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみたKasumi Morita
 
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏Yusuke Hirao
 
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップJavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ慎一 古賀
 
kintone新機能開発のお仕事_和渕.pptx
kintone新機能開発のお仕事_和渕.pptxkintone新機能開発のお仕事_和渕.pptx
kintone新機能開発のお仕事_和渕.pptxCybozu, Inc.
 

Similaire à KMC Font Project 1 - フォント製作・Typeface Designの基本 (20)

クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 
ゼロから深層学習を学ぶ方法 - CMS大阪夏祭り2017
ゼロから深層学習を学ぶ方法 - CMS大阪夏祭り2017ゼロから深層学習を学ぶ方法 - CMS大阪夏祭り2017
ゼロから深層学習を学ぶ方法 - CMS大阪夏祭り2017
 
C#でアプリを作ってみよう! #ngtnet
C#でアプリを作ってみよう! #ngtnetC#でアプリを作ってみよう! #ngtnet
C#でアプリを作ってみよう! #ngtnet
 
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
 
Computer Vision と Translator Text API 使ってみた
Computer Vision と Translator Text API 使ってみたComputer Vision と Translator Text API 使ってみた
Computer Vision と Translator Text API 使ってみた
 
ATEMスイッチャーSDKを使用したライブ動画配信用制作・送出システムの開発
ATEMスイッチャーSDKを使用したライブ動画配信用制作・送出システムの開発ATEMスイッチャーSDKを使用したライブ動画配信用制作・送出システムの開発
ATEMスイッチャーSDKを使用したライブ動画配信用制作・送出システムの開発
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
Visual Studio Code のこれまでとこれから at OSC 2021 Online/Spring
Visual Studio Code のこれまでとこれから at OSC 2021 Online/SpringVisual Studio Code のこれまでとこれから at OSC 2021 Online/Spring
Visual Studio Code のこれまでとこれから at OSC 2021 Online/Spring
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
 
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editorデザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
 
カスタマーマーケティングMeetup vol.6 パネルディスカッション
カスタマーマーケティングMeetup vol.6  パネルディスカッションカスタマーマーケティングMeetup vol.6  パネルディスカッション
カスタマーマーケティングMeetup vol.6 パネルディスカッション
 
わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門
 
拡散する画像生成.pdf
拡散する画像生成.pdf拡散する画像生成.pdf
拡散する画像生成.pdf
 
弊社サービスを使って ノーコード開発してみた.pdf
弊社サービスを使って ノーコード開発してみた.pdf弊社サービスを使って ノーコード開発してみた.pdf
弊社サービスを使って ノーコード開発してみた.pdf
 
BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介
 
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
最近よく聞くブロックタイプエディタを
CMSごとに調べてみた
 
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
 
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップJavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
 
kintone新機能開発のお仕事_和渕.pptx
kintone新機能開発のお仕事_和渕.pptxkintone新機能開発のお仕事_和渕.pptx
kintone新機能開発のお仕事_和渕.pptx
 

KMC Font Project 1 - フォント製作・Typeface Designの基本

Notes de l'éditeur

  1. ローマン/サンセリフ 共通してアセンダラインはキャップラインよりも高くする Xハイトとは、その名の通り小文字 x の高さ
  2. 和文書体デザインの歴史は、活字に端を発する この2書体は、開発当初から現在にわたって、活字・写植・デジタルフォントとフォーマットを変えながら受け継がれている
  3. 号数、というのは活字の寸法のこと
  4. 視覚調整については後述
  5. 写植時代は45度の谷も、すべて食い込みをいれていた
  6. 斜めの線が細いほど/なす角が小さいほど、錯視の影響が強くなるので、補正も大胆に行う
  7. 今回挙げた例では、クロソイド始点を直交座標原点にとっている クロソイド
  8. 骨格の曲率半径 無限から実定数に急変 しかもRは結構小さい よって、Rを次第に小さくしていけば良い 厳密なクロソイド曲線は必要ない 意識すればそれで良い 安直な方向に走らなければ良い