Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There actually <strong>are</strong> some standard formulas for this kind of thing.</p> <ol> <li>The law of thirds. When in doubt, split it into three parts. Divide by three until you get to something reasonable.</li> <li>The Golden Ratio - this is a little tougher, and you really need a program like Golden Section in order to pull it off correctly, but the basic idea is that your padding should be some multiple of the Golden ratio. The Golden Ratio is <code>((a+b)/a) = (a/b))</code> or about 1.618.</li> <li>The A4 ratio. I don't know what this one is called - but it's 1.414 it's the ratio of a sheet of A4 paper.</li> <li>Almost any ratio will make your grid look balanced if you stick to it.</li> </ol> <p>If your image is 100 pixels wide, you divide by the golden ratio until you get something that's not WAY to big.</p> <p>So golden ratio numbers for 100 pixels are 62, 38, 24, 15, 9, 6, 4, 3, 2, 1. In ems you can use fractional widths, so you wind up with 14.5, 9, 5.6 etc.</p> <p>em units are a function of the width of your "m" in the font, so in CSS they can change throughout the page.</p> <p>The "measure" is the width of line of text. You want your measure to be less than 2 to 2.5 alphabets. (You measure an alphabet by typing the abcdefg... twice.)</p> <p>The Colin Wheildon brochure / book <em>Communicating or Just Making Pretty Shapes</em> has some excellent advice for laying out typography and images. It's largely oriented toward print, but most of the same principles still apply.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload