top of page


This section deals with typography:

production heading and paragraph styles (black)

font scaling

Atkinson Hyperlegible is used for body text.

HelveticaBold and bolded Helvetica are used for titles.

An extended Helvetica family is used for Calendar Event app.

Font Awesome is used for social media and other ornamentation

Heading 1

“He that lies down with Dogs, shall rise up with fleas.”
- Poor Richard’s Almanack, 1733

Heading 2

“No gains without pains.”
- Poor Richard’s Almanack, 1745

Heading 3

Heading 4

“Pardoning the Bad, is injuring the Good.”
- Poor Richard’s Almanack, 1748

Heading 5
Heading 6

“Look before, or you’ll find yourself behind.”
- Poor Richard’s Almanack, 1735

1.174 type scale, based on 16px Atkinson Hyperlegible text and Helvetica headings:

42   41.181  H1  HelvBold  Bld  Ital  Bld Ital und

36    35.683   H2    HelvBold  Bld  Ital  Bld Ital und

30      30.394     H3      HelvBold  Bld  Ital  Bld Ital und

26        25.890        H4       Bolded Helvetica  un-bolded  italic  und

22           22.052           H5         Bolded Helvetica  un-bolded  italic  und

19             18.784               H6           Bolded Helvetica  un-bolded  italic  und

add Helv series used in compact calendar

1.174 type scale, based on 16px Atkinson Hyperlegible text:

42   41.181     Regular  Bold  Italic  Bold Italic

36    35.683      Regular  Bold  Italic  Bold Italic

30      30.394        Regular  Bold  Italic  Bold Italic

26        25.890           Regular  Bold  Italic  Bold Italic

22           22.052               Regular  Bold  Italic  Bold Italic

19             18.784    Para1        Regular  Bold  Italic  Bold Italic

16                16.000      Para2          Regular  Bold  Italic  Bold Italic                     

14                   13.629         Para3             Regular  Bold  Italic  Bold Italic


Production fonts are based are based on a 1.174 scale (FYI: The cube root of the golden ratio).

Calculations were done using a base font size of 16px.

pixels  calculated   ems          usage

208     208.358px    13.022em

177     177.477px    11.092em

151     151.173px    09.448em

129     128.767px    08.048em

110     109.682px    06.855em

093     093.426px    05.839em

080     079.579px    04.974em

068     067.785px    04.237em     home "Welcome"

058     057.738px    03.609em

049     049.181px    03.074em

042     041.892px    02.618em     h1

036     035.683px    02.230em     h2

030     030.394px    01.900em     h3

026     025.890px    01.618em     h4

022     022.052px    01.378em     h5

019     018.784px    01.174em     h6   p1

016     016.000px    01.000em          p2

014     013.629px    00.852em          p3

012     011.609px    00.726em

010     009.888px    00.618em

008     008.423px    00.526em

1.174 type scale, based on 16px Avenir Light text:

Avenir was system default

42   41.181   H1  Light  LightBold  Avenir  Bold

36    35.683     H2    Ligh LightBold  Avenir  Bold

30      30.39      H3      Light  LightBold  Avenir  Bold

26        25.890           H4       Light  LightBold  Avenir  Bold

22           22.052              H5         Light  LightBold  Avenir  Bold
19             18.784           P1   H6          Light  LightBold  Avenir  Bold

16                16.000               P2                      Light  LightBold  Avenir  Bold

14                   13.629                   P3                         Light  LightBold  Avenir  Bold

19             18.784           Para1          Avenir Light

16                16.000               Para2              Bolded Avenir Light

14                   13.629                   Para3                 Avenir

bottom of page