Refactor fontPalette.js

[masakudamatsu]

For code readability.

Use rem, not px For a few exceptions, base x-height in px is needed

• height of input fields
• height of buttons
• side margins

Values are hardcoded only for

• base x-height
• modular scale
• font metrics
• number of px for 1rem

Font-size scale is defined in terms of x-height

• body text
• alert text
• footer
• section titles
• landing page paragraphs

or in terms of cap-height

• font name display
• input field numbers
• step number in navigation

Line-height is first defined in rem, and then mapped into the relative term to font-size

• We need the rem values for text crop
• body text
• section title
• step number
• code
• font name display
• (the last two components use body text's line-height for paddings)

Text crop in em is derived as a function of line-height only

• The amount of crop always depends on the proportion of descender or ascender - cap-height (or x-height) relative to font-size, plus line-height.
• So using em is straightforward to set the amount of crop.
• We apply this for body text, section title, and step number

Values are rounded up to 4 decimal points at the end of this file (See #175).

• Exceptions: Font name display for which rounding up is applied in style.js

Padding-bottom and -top

• code
• font name display