CSS Typography

CSS Typography
Nikhil
Published on 2021-07-08 12:44:01

CSS Typography Parameter Details


  • font-style - italics or oblique
  • font-variant - normal or small-caps
  • font-weight -  normal, bold or numeric from 100 to 900.
  • font-size -  The font size given in %, px, em, or any other valid CSS measurement
  • line-height - The line-height given in %, px, em, or any other valid CSS measurement
  • font-family - This is for defining the family's name.
  • color - Any valid CSS color representation, like red, #00FF00, hsl(240, 100%, 50%) etc.
  • font-stretch - Whether or not to use a confenced or expanded face from font. Valid values are normal, ultracondensed, extra-condensed, condensed, semi-condensed, semi expanded, expanded, extraexpanded or ultra-expanded
  • text-align - start, end, left, right, center, justify, match-parent
  • text-decoration - none, underline, overline, line-through, initial, inherit;

 

The Font Shorthand


With the syntax:

element {
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

You can have all your font-related styles in one declaration with the font shorthand. Simply use the font property, and put your values in the correct order.

For example, to make all p elements bold with a font size of 20px and using Arial as the font family typically you would code it as follows:

p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}

However, with the font shorthand, it can be condensed as follows:

p {
font: bold 20px Arial, sans-serif;
}

Note: that since font-style, font-variant, font-weight, and line height are optional, the three of them are skipped in this example. It is important to note that using the shortcut resets the other attributes not given. Another important point is that the two necessary attributes for the font shortcut to work are font-size and fontfamily. If they are not both included the shortcut is ignored.

Initial value for each of the properties:

  • font-style: normal;
  • font-variant: normal;
  • font-weight: normal;
  • font-stretch: normal;
  • font-size: medium;
  • line-height: normal;
  • font-family – depends on user agent

 

Quotes


The quotes property is used to customize the opening and closing quotation marks of the <q> tag.

q {
quotes: "«" "»";
}

 

Font Size


HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS:

#element-one {
font-size: 30px;
}
#element-two {
font-size: 10px;
}

The text inside #element-one will be 30px in size, while the text in #element-two will be 10px in size.

 

Text Direction


div {
direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

The direction property is used to change the horizontal text direction of an element.

Syntax:

direction: ltr | rtl | initial | inherit;

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

Syntax: direction: horizontal-tb | vertical-rl | vertical-lr;

 

Font Stacks


font-family: 'Segoe UI', Tahoma, sans-serif;

The browser will attempt to apply the font face "Segoe UI" to the characters within the elements targeted by the above property. If this font is not available, or the font does not contain a glyph for the required character, the browser will fall back to Tahoma, and, if necessary, any sans-serif font on the user's computer. Note that any font names with more than one word such as "Segoe UI" need to have single or double quotes around them.

font-family: Consolas, 'Courier New', monospace;

The browser will attempt to apply the font face "Consolas" to the characters within the elements targeted by the above property. If this font is not available, or the font does not contain a glyph for the required character, the browser will fall back to "Courier New," and, if necessary, any monospace font on the user's computer.

 

Text Overflow


The text-overflow property deals with how overflowed content should be signaled to users. In this example, the ellipsis represents clipped text.

.text {
overflow: hidden;
text-overflow: ellipsis;
}

Unfortunately, text-overflow: ellipsis only works on a single line of text. There is no way to support ellipsis on the last line in standard CSS, but it can be achieved with non-standard webkit-only implementation of flexboxes.

.giveMeEllipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N; /* number of lines to show */
line-height: X; /* fallback */
max-height: X*N; /* fallback */
}

 

Text Shadow


To add shadows to text, use the text-shadow property. The syntax is as follows:

text-shadow: horizontal-offset vertical-offset blur color;

Shadow without blur radius

h1 {
text-shadow: 2px 2px #0000FF;
}

This creates a blue shadow effect around a heading

Shadow with a blur radius

To add a blur effect, add an option blur radius argument

h1 {
text-shadow: 2px 2px 10px #0000FF;
}

Multiple Shadows

To give an element multiple shadows, separate them with commas

h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

 

Text Transform


The text-transform property allows you to change the capitalization of text. Valid values are: uppercase, capitalize, lowercase, initial, inherit, and none

CSS

.example1 {
text-transform: uppercase;
}
.example2 {
text-transform: capitalize;
}
.example3 {
text-transform: lowercase;
}

HTML

<p class="example1">
all letters in uppercase <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
all letters in lowercase <!-- "all letters in lowercase" -->
</p>

 

Letter Spacing


h2 {
/* adds a 1px space horizontally between each letter;
also known as tracking */
letter-spacing: 1px;}

The letter-spacing property is used to specify the space between the characters in a text.

! letter-spacing also supports negative values:

p {
letter-spacing: -1px;
}

Text Indent
p {
text-indent: 50px;
}

The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element.

 

Text Decoration


The text-decoration property is used to set or remove decorations from text.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand property:

.title { text-decoration: underline dotted blue; }

This is a shorthand version of

.title {
text-decoration-style: dotted;
text-decoration-line: underline;
text-decoration-color: blue;
}

It should be noted that the following properties are only supported in Firefox

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

 

Word Spacing


The word-spacing property specifies the spacing behavior between tags and words.

Possible values

  • a positive or negative length (using em px vh cm etc.) or percentage (using %)
  • the keyword normal uses the font's default word spacing
  • the keyword inherit takes the value from the parent element

CSS

.normal { word-spacing: normal; }
.narrow { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
<span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
<span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
<span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

 

Font Variant


Attributes:

normal

Default attribute of fonts.

small-caps

Sets every letter to uppercase, but makes the lowercase letters(from original text) smaller in size than the letters that originally uppercase.

CSS:

.smallcaps{
font-variant: small-caps;
}

HTML:

<p class="smallcaps">
Documentation about CSS Fonts<br>
aNd ExAmpLe
</p>

Output:

css typography output

Note: The font-variant property is a shorthand for the properties: font-variant-caps, font-variant-numeric, fontvariant- alternates, font-variant-ligatures, and font-variant-east-asian.

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website