From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/posts/ndenting-text-with-css/index.html | 66 --------------------------- 1 file changed, 66 deletions(-) delete mode 100644 build/posts/ndenting-text-with-css/index.html (limited to 'build/posts/ndenting-text-with-css/index.html') diff --git a/build/posts/ndenting-text-with-css/index.html b/build/posts/ndenting-text-with-css/index.html deleted file mode 100644 index cf5b4ad..0000000 --- a/build/posts/ndenting-text-with-css/index.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - 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:

-

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