User Tools

Site Tools


typography_core_elements

Typography & Core Elements

Here you setup the overall appearance and type and other basic HTML elements appearing on your page. This includes paragraphs, headings, blockquotes, code, forms, hyperlinks, lists, etc.

Here you set the base font-family and font-size for the page, and the appearance of hyperlinks. For font-size, a value between 14-16 is generally appropriate, depending upon font choice.

The Font-family stack operates according to the standard CSS font-family rules. You may select pre-made font stacks from the pull-down menu, or you may write-in your own typefaces.

You may select separate font-families for blockquote and code text. If you don't think you will use blockquotes or code on your pages, then keep the defaults. In general, a _serif_ font is appropriate for blockquotes, while a _monospace_ font is appropriate for code.

Headings are important, as they usually act as page titles or section demarcations. In general, you will want these to stand apart from your paragraphs – make them larger, bolder, or render them in a separate font-family. Web-designers will commonly use a _sans-serif_ font for body text, and a large _serif_ font for headings as a way to clearly separate the two.

The hash marks in the UI show you the Markdown syntax for each heading. So if you wanted an H2 heading on the page, then you would write it like this:

## This is an H2 Heading

Under Miscellaneous Elements you may change the appearance of horizontal-rules and list bullets.

Here you may customize the color of HTML forms. If using TTG CE3 Pages, you can preview your customizations on the Contact page. If using TTG CE3 Gallery, Horizon, Auto Index, Stage or another plugin that supports password protection, you may go to the Output Settings control pane, enable Password Protection and then Preview Login Form to see how your forms will look. With TTG CE3 Client Response Gallery, just scroll to the bottom of the page; there's a form at the bottom.

The tables color selector allows you to set a separate color for alternating table rows. Rows will alternate between transparent (using your content background-color) and the color that you set here, so you will generally want to choose a shade that is just off your background-color for the content. For example, if you're writing on a white background, then a very light grey (#f1f1f1) makes a good choice for the alternating color.

typography_core_elements.txt · Last modified: 2013/02/04 06:51 by admin