フォントサイズ調査
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
View only
 
 
ABCDEFGHIJKLMNOPQRSTUVWXYZAAABACADAEAFAG
1
単位 : pxmargin余白(画面の左右の余白)
2
PC SPtitle font-sizeタイトルフォントサイズ
3
書体表題本文行送り表題本文行送り
body font-size
本文フォントサイズ
4
サイト名font-familytitle font-sizebody font-sizeline-heighttitle font-size body font-sizeline-heightline-heigt文字送り
5
Photoshop
Photoshop
Photoshop
Photoshop
6
1Yahooニュースfont-family: メイリオ, "Hiragino Kaku Gothic Pro", Meiryo, "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;22.016.029.01.818361632241.5
7
2ナタリーヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', sans-serif32.015.024.01.622441632261.6▼考察
8
3NHKニュース"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;32.016.026.01.624481632261.6
たいせつなこと。自分の中で基準となる文字の組み方を持つ事
9
4asahi.com24.016.026.01.618361836271.5
10
5Twitter"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;14.020.01.41428181.3フォントサイズ (2018年2月調査)
11
6文春オンラインNoto Sans JP', Helvetica, Arial, sans-serif32.016.029.01.824481428211.5
12
7ITmediaMeiryo, メイリオ, ArialMT, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Verdana,24.016.026.01.618361428261.9 ▼ 表題
13
8BuzzFeedProxima Nova", Helvetica, Arial, sans-serif
42.017.025.01.522441632241.5 PC (px) SP (px)
14
9ピースオブケイクYakuHanJPs, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo, sans-serif32.016.045.02.820401632322.0基準範囲基準範囲
15
10日経ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS Pゴシック", sans-serif
;
24.016.037.02.323461632291.83220~424036~48
16
11おかやまLato, 游ゴシック, "Yu Gothic", YuGothic, sans-serif
;
28.017.030.01.822441428251.8
17
12どっこいしょニッポン"游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif42.020.032.01.621421632231.4 ▼ 本文
18
13cinra游ゴシック, YuGothic, KoburinaGo-W3-83pv-RKSJ-H, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "MS Pゴシック", Meiryo, sans-serif
;
26.016.029.01.818361632261.6 PC (px) SP (px)
19
14note-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo, sans-serif32.018.035.01.920401632322.0基準範囲基準範囲
20
15ピーチHiragino Kaku Gothic Pro", Meiryo, "MS PGothic", arial, sans-serif
;
30.016.030.01.918361530241.61614~183028・30・32
21
16by-s"Noto Sans Japanese", serif28.016.024.01.518361428251.8
22
17JSPAヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, メイリオ, "MS Pゴシック", Verda39.017.027.01.618361632241.5
▼ 本文(行送り)
23
18はこにわヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, sans-serif, "MS Pゴシック25.014.028.02.020401428282.0 PC (px) SP (px)
24
19MYLOHAS游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif26.015.029.01.918361530271.8基準範囲基準範囲
25
20KAI-YU-apple-system, BlinkMacSystemFont, "Segoe UI", "helvetica neue", helvetica, YuGothic, 游ゴシック, Verdana, Meiryo, "M+ 1p", sans-serif
40.016.029.01.822441632291.81.81.5~2.01.81.5~2.0
26
21GQapple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Verdana, YakuHanJP, "Hiragino24.011.030.02.725501734311.8
27
22ファッションプレス-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif
;
27.016.032.02.021421632291.8
28
23電通報Helvetica Neue", Helvetica, ヒラギノ角ゴ, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino42.017.032.01.940801530181.2 表題
29
24businessinsider"Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif40.017.030.01.820401530261.7
本文よりも行間を狭めにすると、読みやすく引き締まってみえる
30
25newspicks"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", sans-se26.016.029.01.824481428221.6
見出しサイズは本文の黄金比の(×1.61)倍で設定すると綺麗に見える。Webでは16pxの本文なら、見出しは25pxくらい。
31
26wired"Helvetica Neue", Helvetica, Arial, YuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif
18.014.026.01.918361428261.9
<便利ツール> 本文と見出しのフォントサイズを数学的にバランスの良い比率
32
27UXMILKヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック"37.015.026.01.723461530261.7
33
28花椿HonMinSink-M, "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メ40.016.030.01.916321632301.9
34
29retrip"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", sans-se32.016.00.018361530241.6 本文
35
30herenow"Open Sans", "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "Hiragino Kaku Gothic36.016.032.02.024481428241.7
body font-size
文章を目で追いやすい。目を上下に動かさなくても読めることが大切
36
31qeticYuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック, "ヒラギノ角ゴ ProN W6", "ヒラギノ角ゴ Pro W6"20.015.027.01.814281224242.0
1行に25〜40字くらい(PC)で折り返すと読みやすい
37
32newbalance"Noto Sans Japanese", sans-serif35.015.030.02.024481530261.7
ニュースなど硬めの文章は狭め、エッセイなどは柔らかめの文章は広める
38
33SEKAI游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;36.016.029.01.821421428251.8
フォントカラーを少し薄い色にすると、文字がチカチカせず、読みやすい
39
34池上線\\6E38ゴシックMedium", "Yu Gothic Medium", "\\6E38ゴシック体", YuGothic, "\\30D2ラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "\\30E1イリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif
32.016.029.01.814281428251.8
40
35camoor"Noto Sans Japanese", "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", Osaka, Verdana, sans-serif32.014.025.01.820401428322.3
41
36honeyeeHelvetica, "Helvetica Neue", "Lucida Grande", Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku G32.014.025.01.820401530271.8 行送り
42
37リンククロス游ゴシック, YuGothic-Medium, YuGo-Medium, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, モトヤLシーダ3等幅, MotoyaLCedar, メイリオ, Meiryo, sans-serif20.014.025.01.815301428241.7
line-heigt
150%、175%、200% での設計がもっとも汎用性が高い
43
38GRINDYuGothic, 游ゴシック, sans-serif24.014.028.02.014281428282.0
折り返しの横幅が長い時は広く。短い時は狭くすることで、 文章が途切れた感じを受けずに読みやすくなる。
44
39effectYuGothic, 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, san20.015.030.02.014281428282.0
45
40difaヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック27.014.025.01.822441632261.6
46
41liveraryArial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif28.014.027.01.920401632281.8 その他
47
42gmsYuGothic, 游ゴシック, sans-serif38.014.021.01.518361428211.5
センター揃えのテキストの行間は、左揃えよりも広めにする
48
43greenzAvenir Next W00", 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Arial, メイリオ, Meiryo, Roboto, sans-serif32.018.038.02.122441632322.0
49
44cotasLucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif24.016.029.01.818361428251.8
50
452-5-dYakuHanJP, -apple-system, BlinkMacSystemFont, "Hiragino Sans", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN W3", Helvetica, Arial, Meiryo, メイリオ, sans-serif24.016.029.01.821421530271.8参考サイト
51
46shipsmagHelvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 游ゴ24.016.029.01.814281428251.8
メディアサイトの記事ページをデザインするときに、参考になる数値まとめ
52
47cakesヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS Pゴシック", Arial, Helvetica, sans-serif
;
31.016.028.01.821421428251.8
読みやすさの備忘録
53
48ラインニュースpple-system-bugfix, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", sans-serif
;
21421632251.6
メディアサイト・Webマガジンリンク集
54
デザイン上達の秘訣は「文字の扱い方」!テキストを読みやすくする5つのポイント
55
Webのためのタイポグラフィ【行間編】
56
ガイドラインに学ぶスマホWebデザインの要点
57
https://docs.google.com/spreadsheets/d/1IMt7WKBw4KLbbYCoL3675O8Clk7TiI6sofISkNNO0UY/edit#gid=744225268
58
59
60
中央値30.516.029.01.820.040.015.030.026.01.8
61
平均 30.015.628.71.8120.140.315.030.025.91.73
62
63
64
65
66
67
68
表題本文行送り
69
PC
SP (px)
PC SP (px)
70
PC SP (px)サイズサイト数サイズPSサイト数サイズサイト数サイズサイト数
71
サイズサイト数サイズPSサイト数111122411.4311.201
72
1811428514101428191.4711.291
73
20315301156153091.5021.441
74
2211632116221632171.5911.506
75
248183612175173411.6021.561
76
25120407182183611.6331.571
77
263214262011.7311.602
78
272224461.7511.634
79
283234621.7621.712
80
301244851.7941.733
81
31125501481.8011.751
82
3210408011.81101.797
83
3511.8611.803
84
3621.8831.813
85
3711.9321.821
86
3811.9411.862
87
3912.0061.881
88
4032.1112.007
89
4233230282.3112.291
90
2.731
91
3028262.811
92
93
94
95
96
97
98
99
100
Loading...
Main menu