Body Type
Concise has a global font-size of 16px (1em) with a line-height of 1.5 (24px). This is applied to all text within the <body> tag. Also, all <p> tags receive a bottom-margin of 24px, the exact same size as our line height.
You can change the $base-font-size variable in the /helpers/_variables.scss file to adjust the base font size. In addition, the $base-font-color and $base-link-color variables will change the font color and link color, respectively.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Font Families
Typography is a key to effective design, so Concise makes it simple to control in your project.
By default, Helvetica, with Arial as a fallback, is used as the default font on non-mobile devices. However, for Android phones, Droid Sans is used as the default font, with Helvetica and Arial as fallbacks.
You can change the $base-font-family variable in the /helpers/_variables.scss file to adjust the base font families.
Vertical Rhythm
From our global line-height of 1.5 we can calculate what is called our magic number. This will allow us to maintain vertical rhythm in our design by providing us a number with which to base all line heights and bottom margins. This number can be found by multiplying our font size by our line height as such: 16 × 1.5 = 24. Given this equation, 24px is our magic number.
In order to maintain vertical rhythm in our designs, all line heights and bottom margins must be divisible by 24px.
You can change the $base-line-height variable in the /helpers/_variables.scss file to adjust the base line height.
Rem Sizing
I have chosen to handle font sizing in Concise with the rem unit (a unit that was added with CSS3) instead of px or em. Jonathan Snook has done a great write-up about rem and its benefits/differences that I suggest you read.
Basically, styling fonts in rems instead of ems allows all of our font sizes to be based off of the "root em", or the font size that was declared in the <html> or <body> element. This differs from traditional ems as ems are relative to parent elements. This means that the font size compounds the deeper you get into the HTML inheritance.
However, for the sake of supporting legacy browsers, a px fallback has been added to each and every font size in Concise.