Deskspace CMS
Flexible Theme Controls

Typographical controls

dCMS_v3.1_screen_explanations.jpg

There are few other controls, which are seldom adjusted in the Page Editor settings screen. These are maximum page width, maximum top navigation width (these can vary) and the 4 break points, the device display widths in pixels, at which the 5 different sets of type size settings and some other items change to suit the size of display being used to view the site.

Here is a description of the user typographical controls available for the theme selected for the current page
AND a description of a second set of duplicate controls which override the selected theme on just this page.

PAGE

Set the maximum page width in pixels, you may also need to set the maximum top nav width as this may vary slightly depending on the font and size used. (To be found in Page Editor Settings.)

Every paragraph on the page is labelled with hash characters as one of HTML "Heading" h1 - h6, respectively a single hash through to six hashes, and this enables the App to apply the correct CSS styling to each separate paragraph every time the page is rebuilt, which typically takes a few 100th of a second.
h1, the page title and h2 a section divider are full width and h3, h4, h5 and h6 can be full width or float left and right as required and can all be fully styled.
If no hash is used the paragraph is not displayed and becomes a comment.

COLUMN WIDTH

Set the width of the left column when viewed on wider screens as a percentage of the specified maximum width. We generally recommend 1000px width.
The width of the right column is automatically adjusted.
If no width is set the left column is set to 100%.
Hence for instance, a page may set to a left column width of 61.8% (the golden ratio) but another page may be set to 50% to suit the different balance of content length between left and right columns.

RESPONSIVE BREAK POINTS

You can control how your page responds to being displayed on different widths of device screen, and override those theme settings on a page by page basis. (To be found in Page Editor Settings.)
So this means you can can fine tune both your whole site and every individual page.
You do this by setting four different media width break points in pixels at theme and at page level.

TYPE

We generally use the measurement unit of EMS - not pixels or points - for all sizes unless otherwise stated. One EM is the height of the type size being used, hence it changes proportionally as you change the selected Font Family.
This means that your page layout automatically suits whatever font families you have selected.

FONT FAMILY

Every device has a different selection of fonts available and we do not want to be asking users to download fonts, which are big files, onto their small devices. Hence we use font families. A font family is a list of similar fonts where the user's browser will use the first in the list that is present on their device. This means that you will never know exactly how your pages will look on any specific device unless you have tried it out and tested it.
Font families are the best method of font specification on mobile devices because they never ask the user's browser to download any additional fonts.
Set the default type font family
Optionally set a different font family for each of h1, h2, h3, h4, h5 & h6.

TYPE SIZES

You can set the type font sizes in ems for each of five different sets of CSS, corresponding to the four break points, for each h1, h2, h3, h4, h5 & h6 - 30 different size settings. (This can be found on the second tab of the designer screen. The type size adjuster shown in the Toolbox displays the middle size but adjusts all five sizes simultaneously.)
base
small
medium
large
extra large

TYPE ALIGNMENT

Set the type alignment.
For each of h1, h2, h3, h4, h5 & h6.

TYPE LETTER SPACING

Set the type character spacing in EMS
For each of h1, h2, h3, h4, h5 & h6.

TYPE INDENT

Set the first line type indent in EMS.
For each of h3, h4, h5 & h6.

PARAGRAPH

PARAGRAPH INDENT

Set the paragraph indent in EMS
For each of h3, h4, h5 & h6.

PARAGRAPH PADDING

Set the padding above and below the paragraph in EMS.
For each of h1, h2, h3, h4, h5 & h6.

BORDERS

BORDER WIDTH

Set the border depth in pixels for each of the top, right, bottom & left borders of each paragraph style - that is another 24 settings.
h1, h2,
h3, h4,
h5, h6.

COLOR

Color can be specified in any of the four following ways:

1. HTML color name
2. HTML Hex color
3. RGB color
4. RGBA color
use an html color name, for your convenience the app displays a list of those words on every color setting field;
use any Hex color, preceeded by a hash character, which you can easily get using any color sampling software or App;
using RGB colors in the form rgb(nnn,nnn,nnn) and
using RGBA colors in the form rgb((nnn,nnn,nnn,1).

Controlling opacity with RGBA color

This method has the great advantage that it enables you to control the opacity of every visual element on the page, type, background and borders.
Here the fourth number, 1, sets opacity to 100%. You can use any decimal less than 1 to make whatever you have colored with this setting increasingly transparent. So .5 sets it to 50% and .01 to 1%.

BACKGROUND COLOR

Set the default background color of the page and set the background color for each paragraph.
h1, h2,
h3, h4,
h5, h6.

TYPE COLOUR

Set the default color of type and the type color for each paragraph
h1, h2,
h3, h4,
h5, h6.

BORDER COLOUR

Set the border colour for each paragraph.
h1, h2,
h3, h4,
h5, h6.