Styleguide

Überschriften + Produktnamen

Style Editor + Custom CSS
Die Basis Überschriften sind im Squarespace Style Editor festgelegt und sollten nicht geändert werden. Das Feintuning der Überschriften und abweichendes Verhalten ist im Custom CSS definiert.  Das Verhalten kann rein theoretisch pro Squarespace Inhaltstyp oder sogar pro Seite definiert werden. 

Abweichungen von der Standardüberschrift über <hx> + <strong> + <em> Kombinationen
Das Standardverhalten der Überschriften kann hier kombiniert mit HTML Tags im WYSIWYG Editor und HTML Inhaltstyp für Text mittels Bold (B, html Tag <strong>)  und Emphasized(I, html Tag <em>) vom Redakteur festgelegt werden.

Groß-und Kleinschreibung
Diese ist grundsätzlich nach Möglichkeit einzuhalten. Die Darstellung in Großbuchstaben ist über Formatierung und nicht über tatsächlich geschriebene Großbuchstaben zu erreichen.

Produktnamen
Ein Ausnahme sind Produktnamen wie moveLOC, trigLOC, leveLOC. Diese sollen wie im Print auch in den Überschriften korrekt dargestellt werden. Hier wird also tatsächlich move klein- und LOC großgeschrieben.


Standard Überschrift <h1>

font-size: 44px;
font-weight: 300;
font-family: Roboto ;
line-height: 1.5em;
letter-spacing: 0.01em; 
text-transform: uppercase;
color: #171717;

Standard Überschrift <h2>

font-size: 32px;
font-weight: 400;
font-family: Roboto ;
line-height: 1.2em;
letter-spacing: 0.01em; 
text-transform: uppercase;
color: rgba(23,23,23,.8);

Standard Überschrift <h3>

font-size: 32px;
font-weight: 300;
font-family: Roboto Condensed ;
line-height: 1.6em;
letter-spacing: 0.02em; 
text-transform: uppercase;
color: #222;

Standard Überschrift h4 - nur über HTML Code Inhaltstyp

font-size: 20px;
font-weight: 400;
font-family: Roboto;
letter-spacing: .06em;
line-height: 1.8em;
text-transform: none;
color:#007895;


Überschrift 1 Schmuckfarbe

<h1>Überschrift<strong>Schmuckfarbe</strong></h1>

Überschrift 2 Schmuckfarbe

<h2>Überschrift<strong>Schmuckfarbe</strong></h2>

Überschrift 3 Schmuckfarbe

<h3>Überschrift<strong>Schmuckfarbe</strong></h3>


leveLOC

Die absenkbare Sattelstütze.
Leicht, robust, bis zu unschlagbaren 200mm Verstellweg.

 

<h1><em>leve<strong>LOC</strong></em></h1>
Anwendung: ausschließlich in Index Produktseiten auf einer Unterseite ohne Hintergrundbild.
Abweichung


Überschrift 2 leveLOC

<h2><strong>Überschrift 2</strong> <em>leve<strong>LOC</strong></em></h2>

Überschrift 3 leveLOC

<h3><strong>Überschrift 3</strong> <em>leve<strong>LOC</strong></em></h3>


Die folgenden Überschriften sind mit Produktnamen in Schmuckfarbe sind nur realisierbar in HTML Blöcken und in Bildtiteln von Slideshows (<h1>) über manuelle mehrfach verschachtelte <strong>+<em> Tags. Daher eher vermeiden und Produktnamen nicht in Schmuckfarbe setzen.

Überschrift leveLOC

Überschrift leveLOC

Überschrift leveLOC

<hx>Überschrift <strong><em>leve<strong>LOC</strong></em></strong></hx>