From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/ndenting-text-with-css/index.html | 67 +++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 build/ndenting-text-with-css/index.html (limited to 'build/ndenting-text-with-css/index.html') diff --git a/build/ndenting-text-with-css/index.html b/build/ndenting-text-with-css/index.html new file mode 100644 index 0000000..2687284 --- /dev/null +++ b/build/ndenting-text-with-css/index.html @@ -0,0 +1,67 @@ + + + + + + + CSS: Indenting Text + + + + + + +
+

CSS: Indenting Text

+

2019-04-05

+

A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn't an insult - I'm happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it.

+

In today's TypeTip we're going to play around with the text-indent property, look into when it's best to use it and how to implement it properly.

+

The property and browser support

+

Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:

+

+ Text indent browser compatibility +
Full support across all browsers.
+

+

Now that doesn't mean you should just slap this property on all your type elements and call it a day - there are specific use cases for text-indent and some basic rules to follow:

+

Use Cases

+
    +
  1. Increasing readability of large text blocks that would otherwise overwhelm the reader
    2. +
  2. Replicating book or report typography layouts
    3. +
+

Basic Rules

+
    +
  1. Best to set this property on inner type children only - meaning items like p or blockquotes instead of main headings
    2. +
  2. When used on paragraph tags it's best to target only p elements that directly follow a sibling tag (see "The CSS" below)
    3. +
+

The CSS

+

Adding the property is extremely trivial, all you need is the following:

+
/* Best practice for paragraphs */
+p + p {
+    text-indent: 1rem; /* whatever you want */
+}
+
+

Let's see it in action

+

Live CodePen Example

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf