create account

02.05 - Size - The Foundations of Typography by spencec6

View this thread on: hive.blogpeakd.comecency.com
· @spencec6 ·
$103.62
02.05 - Size - The Foundations of Typography
![](http://i.imgur.com/EnFbR1d.png)
Chapter 02 - Classifying Type
**Lesson 05 - Size**

Understanding the sizes of fonts is an important part of typography. There are a few different ways in which we can measure type. The most obvious way, being...height.
	
Height
---
All letter height is measured in Points. 

![](http://i.imgur.com/WVM8j3t.png)
We use ‘pts’ to abbreviate points like ‘8 pts'. OR by placing a ‘p’ before the measurement like 'p8'. A pica is abbreviated with the ‘p’ following the measurement like '6p'. If you want to abbreviate a measurement that was 4 picas and 2 points, it looks like so '4p2'

Line Height
---
Line height is the distance between the baselines and is commonly referred to as ‘leading’. In print design, line height is typically measured in points, whereas in digital type, it can be measured in a number of formats such as percentage (120%), decimal (1.2), pixels (20px), ems (1.2em), metric (0.4cm), or point (12pt).

A quick way to reference the point size and line spacing of a text is by using a slash between the 2 measurements. First the point size, then the leading size, usually followed by the name of the typeface. 

*Ex: 10/12 Bodoni*

This is mostly used for print, as it's unclear which units you'd be using with web design. However, those of you who are familiar with css will recognize this as the same syntax used in the 'font' shorthand property.

X-Height
---
X-heights may appear very different among the same size of different typefaces, and similarly, set widths may appear very different among typefaces with the same x-heights. 

Width
---
“Set width” is how we describe the width of a letter. The set width is the width of the body plus a sliver of space that protects it from other letters. As you will learn later in the course, some typefaces are designed with narrow set widths, and some with quite wide set widths.

Measure
---
The width of a line of text can also be measured in points and picas, and this is called a “measure”. The “measure” of this paragraph is about 35 picas wide. In digital design, it's simpler to refer to the cpl or Characters Per Line or even the containing element's width, depending on what you're looking to calculate.

Scale
---
Scale is the size of the design element (or type in this case) compared to other elements in a layout. It is all relative. 

X-heights: As we mentioned earlier, the x-height can vary quite a bit between typefaces. So if you are inserting a new typeface which has a slightly different x-height, it’s generally good to exaggerate it a bit so it doesn’t look “off”.

Take a look at these two examples.
![](http://i.imgur.com/pNpSAZF.png)

Optical sizes:
---
Size is not only mathematical in design, it’s optical. If you line up the size of all letters, their different shapes will create an uneven appearance. To make up for this optical discrepancy, designers create “overshoots” which we discussed in the anatomy lesson.

![](http://i.imgur.com/w0qEwXX.png)
To further understand this, take a look at these three shapes. Which is bigger? The square takes up much more space visually, so to make up for this, we would enlarge the triangle and circle. 

![](http://i.imgur.com/dguSs1C.png)
Now, convert these shapes with an H, A and an O. See how adjusting the overshoots creates a subtle optical balance?

This is one of the most overlooked concepts in typography and understanding it will help you immensely. Establishing an optically consistent size is just one puzzle among very many, but understanding the basics of size and measurement, will allow you to focus on the more complex variations and combinations of type.

---

[![](http://imgur.com/UkFcMMf.gif)](https://steemit.com/@spencec6)
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 75 others
👎  
properties (23)
authorspencec6
permlink02-05-size-the-foundations-of-typography
categorytypography
json_metadata{"tags":["typography","design","ux","graphic-design","steemit"],"image":["http://i.imgur.com/EnFbR1d.png","http://i.imgur.com/WVM8j3t.png","http://i.imgur.com/pNpSAZF.png","http://i.imgur.com/w0qEwXX.png","http://i.imgur.com/dguSs1C.png","http://imgur.com/UkFcMMf.gif"],"links":["https://steemit.com/@spencec6"],"app":"steemit/0.1","format":"markdown"}
created2017-07-28 03:09:06
last_update2017-07-28 03:09:06
depth0
children11
last_payout2017-08-04 03:09:06
cashout_time1969-12-31 23:59:59
total_payout_value78.296 HBD
curator_payout_value25.327 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,720
author_reputation1,619,979,867,645
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id9,976,537
net_rshares28,316,681,527,437
author_curate_reward""
vote details (140)
@boomben ·
Great post dude! So such crap typography out there,  gotta educate!
properties (22)
authorboomben
permlinkre-spencec6-02-05-size-the-foundations-of-typography-20170728t061036708z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-28 06:10:36
last_update2017-07-28 06:10:36
depth1
children1
last_payout2017-08-04 06:10:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length67
author_reputation63,388,547,777
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id9,988,530
net_rshares0
@spencec6 ·
Thanks so much!
properties (22)
authorspencec6
permlinkre-boomben-re-spencec6-02-05-size-the-foundations-of-typography-20170729t010513605z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-29 01:05:15
last_update2017-07-29 01:05:15
depth2
children0
last_payout2017-08-05 01:05:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length15
author_reputation1,619,979,867,645
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id10,072,948
net_rshares0
@herpor ·
excellent
properties (22)
authorherpor
permlinkre-spencec6-02-05-size-the-foundations-of-typography-20170728t031402637z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-28 03:14:00
last_update2017-07-28 03:14:00
depth1
children1
last_payout2017-08-04 03:14:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9
author_reputation993,281,921,029
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id9,976,833
net_rshares0
@spencec6 ·
Thanks!
properties (22)
authorspencec6
permlinkre-herpor-re-spencec6-02-05-size-the-foundations-of-typography-20170728t033616443z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-28 03:36:18
last_update2017-07-28 03:36:18
depth2
children0
last_payout2017-08-04 03:36:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7
author_reputation1,619,979,867,645
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id9,978,348
net_rshares0
@kingjan ·
Very impressive and detail oriented, i loved it. keep it up the good work.  Following you now
👍  
properties (23)
authorkingjan
permlinkre-spencec6-02-05-size-the-foundations-of-typography-20170728t140918398z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-28 14:09:21
last_update2017-07-28 14:09:21
depth1
children1
last_payout2017-08-04 14:09:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length93
author_reputation1,609,978,261,257
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id10,023,257
net_rshares4,507,526,702
author_curate_reward""
vote details (1)
@spencec6 ·
So glad to hear it. Thanks a ton!
properties (22)
authorspencec6
permlinkre-kingjan-re-spencec6-02-05-size-the-foundations-of-typography-20170729t010538093z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-29 01:05:39
last_update2017-07-29 01:05:39
depth2
children0
last_payout2017-08-05 01:05:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length33
author_reputation1,619,979,867,645
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id10,072,966
net_rshares0
@pobi ·
Impressive post @ spencec6
Tanx for dis wonderful piece
Keep the fire burning
Steem on
Kudos...
👍  
properties (23)
authorpobi
permlinkre-spencec6-2017728t224452696z
categorytypography
json_metadata{"tags":"typography","app":"esteem/1.4.6","format":"markdown+html","community":"esteem"}
created2017-07-28 22:45:33
last_update2017-07-28 22:45:33
depth1
children1
last_payout2017-08-04 22:45:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length95
author_reputation139,655,781,603
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries
0.
accountesteemapp
weight500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id10,064,810
net_rshares4,599,517,043
author_curate_reward""
vote details (1)
@spencec6 · (edited)
Well, you are very welcome!  Thanks for your support!
properties (22)
authorspencec6
permlinkre-pobi-re-spencec6-2017728t224452696z-20170729t010830026z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-29 01:08:30
last_update2017-07-29 01:08:45
depth2
children0
last_payout2017-08-05 01:08:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length53
author_reputation1,619,979,867,645
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id10,073,122
net_rshares0
@sharadkotadia ·
$0.03
keep it coming. great stuff
👍  ,
properties (23)
authorsharadkotadia
permlinkre-spencec6-02-05-size-the-foundations-of-typography-20170728t131059435z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-28 13:11:00
last_update2017-07-28 13:11:00
depth1
children2
last_payout2017-08-04 13:11:00
cashout_time1969-12-31 23:59:59
total_payout_value0.028 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length27
author_reputation14,991,090,764
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id10,018,214
net_rshares7,851,403,615
author_curate_reward""
vote details (2)
@spencec6 ·
Thanks so much! I'm glad you enjoy!
properties (22)
authorspencec6
permlinkre-sharadkotadia-re-spencec6-02-05-size-the-foundations-of-typography-20170729t010921096z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-29 01:09:21
last_update2017-07-29 01:09:21
depth2
children0
last_payout2017-08-05 01:09:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length35
author_reputation1,619,979,867,645
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id10,073,161
net_rshares0
@sureshgajera ·
Welcome
properties (22)
authorsureshgajera
permlinkre-sharadkotadia-re-spencec6-02-05-size-the-foundations-of-typography-20170728t174938839z
categorytypography
json_metadata{"tags":["typography"],"app":"steemit/0.1"}
created2017-07-28 17:49:45
last_update2017-07-28 17:49:45
depth2
children0
last_payout2017-08-04 17:49:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7
author_reputation11,541,052,144
root_title"02.05 - Size - The Foundations of Typography"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id10,042,914
net_rshares0