Typography for Sencss

Setting up FF Netto Web in the application.

<head>
  <script src="https://use.typekit.net/ida2dzb.js"></script> 
  <script>try{Typekit.load({ async: true });}catch(e){}</script> 
</head>

body {
  font-family: "ff-netto-web", sans-serif;
  font-style: normal;
  font-weight: 400;
}

Font

Specifies the font for an element.

family-name - The name of a font-family, like "times", "arial", etc.
generic-family - The name of a generic-family, like "serif", "sans-serif".

Note: Separate each value with a comma. Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

:root {
  --font-family: 'ff-netto-web', sans-serif;
}

.ff   { font-family: var(--font-family); }

<body class="ff">
  hidden
</body>

Font style

Specifies the font style for a text.

normal - The browser displays a normal font style. This is default.
italic - The browser displays an italic font style.

.fs-n { font-style: normal; }
.fs-i { font-style: italic; }

<i class="fs-i">Italics</i>

Font weight

Sets how thick or thin characters in text should be displayed.

normal - Defines normal characters. This is default.
bold - Defines thick characters.

.fw-n  { font-weight: 400; }
.fw-b  { font-weight: 700; }

<strong class="fw-b">Bold text</strong>

List properties

List

Sets all the list properties in one declaration.

list-style-type - Specifies the type of list-item marker.
list-style-position - Specifies where to place the list-item marker.
list-style-image - Specifies the type of list-item marker.

Note: If one of the values above are missing, e.g. list-style: circle inside; the default value for the missing property will be inserted, if any.

.lis-n { list-style: none; }

<ul class="lis-n">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List position

Specifies if the list-item markers should appear inside or outside the content flow.

inside - Indents the marker and the text. The bullets appear inside.
outside - Default. Keeps the marker to the left of the text.

.lisp-i { list-style-position: inside; }
.lisp-o { list-style-position: outside; }

<ul class="lisp-i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List style type

Specifies the type of list-item marker in a list.

disc - Default value. The marker is a filled circle.
armenian - The marker is traditional Armenian numbering.
circle - The marker is a circle.
cjk-ideographic - The marker is plain ideographic numbers.
decimal - The marker is a number.
decimal-leading-zero - The marker is a number with leading zeros (01, 02, 03).
georgian - The marker is traditional Georgian numbering.
hebrew - The marker is traditional Hebrew numbering.
hiragana - The marker is traditional Hiragana numbering.
hiragana-iroha - The marker is traditional Hiragana iroha numbering.
katakana - The marker is traditional Katakana numbering.
katakana-iroha - The marker is traditional Katakana iroha numbering.
lower-alpha - The marker is lower-alpha (a, b, c, d, e, etc.).
lower-greek - The marker is lower-greek.
lower-latin - The marker is lower-latin (a, b, c, d, e, etc.).
lower-roman - The marker is lower-roman (i, ii, iii, iv, v, etc.).
none - No marker is shown.
square - The marker is a square.
upper-alpha - The marker is upper-alpha (A, B, C, D, E, etc.).
upper-latin - The marker is upper-latin (A, B, C, D, E, etc.).
upper-roman - The marker is upper-roman (I, II, III, IV, V, etc.).

.list-n    { list-style-type: none; }
.list-d    { list-style-type: disc; }
.list-c    { list-style-type: circle; }

<ul class="lisp-i list-c">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List style image

Replaces the list-item marker with an image.

none - Default. No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered.
url - The path to the image to be used as a list-item marker.

Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.

:root {
  --list-style-image-1: url(http://placehold.it/20/ffffff/000000);
  --list-style-image-2: url(http://placehold.it/20/ffffff/000000);
  --list-style-image-3: url(http://placehold.it/20/ffffff/000000);
  --list-style-image-4: url(http://placehold.it/20/ffffff/000000);
}

.lisi-n { list-style-image: none; }
.lisi-1 { list-style-image: var(--list-style-image-1); }
.lisi-2 { list-style-image: var(--list-style-image-2); }
.lisi-3 { list-style-image: var(--list-style-image-3); }
.lisi-4 { list-style-image: var(--list-style-image-4); }

<ul class="lisp-i lisi-1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Text properties

Text align

Specifies the horizontal alignment of text in an element.

left - Aligns the text to the left.
right - Aligns the text to the right.
center - Centers the text.
justify - Stretches the lines so that each line has equal width.

.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-j { text-align: justify; }

<div class="ta-c">
  Centred text
</div>

Text decoration

Specifies the decoration added to text.

none - Defines a normal text. This is default.
underline - Defines a line below the text.
overline - Defines a line above the text.
line-through - Defines a line through the text.

Note: In CSS3, the text-decoration property is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style, but this is currently not supported in any of the major browsers. Note: In CSS3 you can use the text-decoration-color property to change the color of the decoration, otherwise the color is the same as the color of the text.

.td-n { text-decoration: none; }
.td-u { text-decoration: underline; }
.td-o { text-decoration: overline; }
.td-l { text-decoration: line-through; }

<a class="td-n">Hyperlink without an underline</a>

Text transform

Controls the capitalization of text.

none - No capitalization. The text renders as it is. This is default.
capitalize - Transforms the first character of each word to uppercase.
uppercase - Transforms all characters to uppercase.
lowercase - Transforms all characters to lowercase.

.tt-n { text-transform: none; }
.tt-c { text-transform: capitalize; }
.tt-u { text-transform: uppercase; }
.tt-l { text-transform: lowercase; }

<h3 class="h3 tt-u">Uppercase heading</h3>

Text indent

Specifies the indentation of the first line in a text-block.

length - Defines a fixed indentation in px, pt, cm, em, etc. Default is 0.
% - Defines the indentation in % of the width of the parent element.

Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

.ti-- { text-indent: -9999px; }

Text overflow

Specifies how overflowed content that is not displayed should be signaled to the user.

clip - Default value. Clips the text.
ellipsis - Render an ellipsis ("...") to represent clipped text.
string - Render the given string to represent clipped text.

.tov-e { text-overflow: ellipsis; }

<ul>
  <li class="tov-e ov-h whs-nw">
    This example uses other sencss modules to clip text
  </li>
</ul>

Typesetting

Kerning

Increases or decreases the space between characters in a text.

normal - No extra space between characters. This is default.
length - Defines an extra space between characters. Negative values allowed.

:root {
  --letter-spacing-1: .1em;
  --letter-spacing-2: .2em;
  --letter-spacing-3: .3em;
  --letter-spacing-4: .4em;
}

.lts-n { letter-spacing: normal; }
.lts-1 { letter-spacing: var(--letter-spacing-1); }
.lts-2 { letter-spacing: var(--letter-spacing-2); }
.lts-3 { letter-spacing: var(--letter-spacing-3); }
.lts-4 { letter-spacing: var(--letter-spacing-4); }

Leading

Specifies the line height.

normal - A normal line height. This is default.
number - A number that will be multiplied with the current font size.
length - A fixed line height in px, pt, cm, etc.
% - A line height in percent of the current font size.

Note: Negative values are not allowed.

:root {
  --line-height-0: .5;
  --line-height-1: .75;
  --line-height-2: 1;
  --line-height-3: 1.25;
  --line-height-4: 1.5;
  --line-height-5: 1.75;
  --line-height-6: 2;
}

.lh-h0 { line-height: var(--line-height-0); }
.lh-h1 { line-height: var(--line-height-1); }
.lh-h2 { line-height: var(--line-height-2); }
.lh-h3 { line-height: var(--line-height-3); }
.lh-h4 { line-height: var(--line-height-4); }
.lh-h5 { line-height: var(--line-height-5); }
.lh-h6 { line-height: var(--line-height-6); }

Tracking

Increases or decreases the white space between words.

normal - Defines normal space between words (0.25em). This is default.
length - Defines an additional space between words (in px, pt, cm, em, etc).

Note: Negative values are allowed.

:root {
  --word-spacing-1: .1em;
  --word-spacing-2: .2em;
  --word-spacing-3: .3em;
  --word-spacing-4: .4em;
}

.wos-1 { word-spacing: var(--word-spacing-1); }
.wos-2 { word-spacing: var(--word-spacing-2); }
.wos-3 { word-spacing: var(--word-spacing-3); }
.wos-4 { word-spacing: var(--word-spacing-4); }

White space

Specifies how white-space inside an element is handled.

normal - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default.
nowrap - Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.
pre - Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML.
pre-line - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre-wrap - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.

.whs-n  { white-space: normal; }
.whs-nw { white-space: nowrap; }
.whs-p  { white-space: pre; }

Hyphens

Specifies line breaking rules for non-CJK scripts.

normal - Default value. Break words according to their usual rules.
break-all - Lines may break between any two letters.
keep-all - Breaks are prohibited between pairs of letters.

Tip: CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.

.wob-k { word-break: keep-all; }

sencss-typography

Typography for Sencss

Font

Font style

Font weight

Font size

List properties

List

List position

List style type

List style image

Text properties

Text align

Text decoration

Text transform

Text indent

Text overflow

Typesetting

Kerning

Leading

Tracking

White space

Hyphens

Readme

Keywords

Package Sidebar

Install

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

sencss-typography

Typography for Sencss

Font

Font style

Font weight

Font size

List properties

List

List position

List style type

List style image

Text properties

Text align

Text decoration

Text transform

Text indent

Text overflow

Typesetting

Kerning

Leading

Tracking

White space

Hyphens

Readme

Keywords

Package Sidebar

Install

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads