sencss-typography

v1.0.2

Published

2 years ago

Typography utilities for Sencss

Downloads

0High
0Medium
0Low

djmsutherland

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; }