What is typography in css

Typography in CSS

Applies a transparent color to the text. The text will still take up the space it should.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

You can use rgb() color codes:

• the first value is for red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

You can use hsl()a color codes:

• the first 3 values are for hsl
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

# font-family

font-family: «Source Sans Pro», «Arial», sans-serif;

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

The browser will look for each family on the user’s computer and in any @font-face resource.

The list is prioritized from left to right: it will use the first value if it’s available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

In this example, the browser will try to use Source Sans Pro if it’s available. If it can’t find it, it will try to use Arial . If it’s not available either, it will use the browser’s sans-serif font.

The browser will use a serif font family: all characters have stroke endings.

The browser will use a sans-serif font family: no character has stroke endings.

The browser will use a monospace font family: all characters have the same width.

The browser will use a cursive font family.

The browser will use a fantasy font family.

# font-size

Defines the size of the text.

The text will use the browser’s default medium size.

The quick brown fox jumps over the lazy dog

You can use pixel values.

The quick brown fox jumps over the lazy dog

You can use em values.

The value is relative to the parent‘s font-size .
As a result, the value will cascade if used on child elements.

You can use rem values.

The value is relative to the root element‘s font-size , which is the element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

You can use percentage values. They act like em values.

The value is relative to the parent‘s font-size .
As a result, the value will cascade if used on child elements.

You can use relative keywords. The value is relative to the parent.

The following are available:

Источник

CSS Typography | What is Typography in CSS? | Typography Properties & Values

In this tutorial, you will be going to learn completely about CSS Typography and its properties with syntax, values, and some of the example programs. Let’s dive into this tutorial on typography in CSS for better knowledge & fast learnings.

What is Typography?

First and foremost, typography is about usability. Type is the user interface for conveying information, and conveying information is what we’re here to do on the web. There are many levers we can pull to affect the usability of reading text, and only by being deliberate about these can we create a pleasant experience for our users.

Typography Properties in CSS

Properties for typography are listed below:

text-transform

Transform the case of an element.

• capitalize to make the first letter uppercase.
• uppercase to make all text uppercase.
• lowercase to make all text lowercase.
• none to disable transforming the text, used to avoid inheriting the property.

text-decoration

Used to add decoration to the texts, like:

Instead of one line, we can use specific properties of text-decoration. Like:

text-align

Specifies the alignment of the text that will be written. The default value is left, but can override with:

vertical-align

Used only on elements that are arranged in inline.

Specifies how the elements are vertically aligned.

The values that we can use here are:

• baseline (the default), aligns the baseline to the baseline of the parent element.
• sub makes an element subscripted, simulating the sub HTML element result.
• super makes an element superscripted, simulating the sup HTML element result.
• top align the top of the element to the top of the line.
• text-top align the top of the element to the top of the parent element font.
• middle align the middle of the element to the middle of the line of the parent.
• bottom align the bottom of the element to the bottom of the line.
• text-bottom align the bottom of the element to the bottom of the parent element font.

line-height

Help us to change the height of the line. The height of the lines refers to the empty space between two lines.

text-indent

Just like starting a paragraph, we can indent the first line of it.

text-align-last

We can change the behavior of the line of any paragraph (follows text-align property) by using this property.

word-spacing

Can modify the spaces between words.

The default value is normal.

letter-spacing

Can modify the spaces between each letter of a word.

The default value is normal.

text-shadow

Use this property to apply a shadow effect over texts.

The shadow can be applied in both the X and Y axis but with an offset. Also, we can add a blur effect.

If no color of the shadow is specified, it will use the color of the text.

white-space

White spaces are the empty spaces that are added after an indent or next to a line.

Values that collapse whites spaces are:

• normal Adds new lines when necessary as the text reaches the container end.
• nowrap Do not add a new line when the text reaches the end of the container and suppresses any line break added to the text.
• pre-line Adds new lines when necessary as the text reaches the container end.

Values that preserve whites spaces are:

• pre Do not add a new line when the text reaches the end of the container but preserves the line break added to the text.
• pre-wrap Adds new lines when necessary as the text reaches the container end.

tab-size

Determines the size/width of the tab character.

The default value is 8 but can set any values of supported units or an integer.

writing-mode

The writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language.

• horizontal-tb (default).
• vertical-rl content is laid out vertically. New lines are put on the left of the previous.
• vertical-lr content is laid out vertically. New lines are put on the right of the previous.

hyphens

The hyphens property controls hyphenation of text in block-level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.

• none (default).
• manual only add a hyphen when there is already a visible hyphen or a hidden hyphen (a special character).
• auto add hyphens when determined the text can have a hyphen.

text-orientation

The text-orientation property in CSS aligns text in a line when working with a vertical writing-mode.

• mixed is the default, and if a language is vertical (like Japanese) it preserves that orientation while rotating text written in western languages.
• upright makes all text be vertically oriented.
• sideways makes all text horizontally oriented.

direction

The direction property in CSS sets the direction of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.

• ltr – Left to Right, the default
• rtl – Right to Left
• inherit – inherits its value from the parent element

word-break

The word-break property in CSS can be used to change when line breaks ought to occur.

• normal : use the default rules for word breaking.
• break-all : any word/letter can break onto the next line.
• keep-all : for Chinese, Japanese, and Korean text words are not broken. Otherwise, this is the same as normal .

overflow-wrap

The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place.

to break it at the exact length of the line, or

word-break property is as same as this property. We might want to pick this one on western languages, as word-break has a unique approach for non-western languages.

Источник