SlideShare a Scribd company logo
1 of 99
Download to read offline
CSS
LINE-HEIGHT
What is
leading?
Back in the “good old days” type
was set by hand using printing
            presses.
Printed material was created by
setting out letters in rows. Each
    letter was created on an
        individual block.
Leading, or lead strips were
added between the lines of letters
 when additional vertical space
         was required.
In CSS, line-height is used to
   control the vertical space
        between lines.
However,the terms leading and
 half-leading are still used in
        association with
       CSS line-height.
So how do you
     apply
 line-height?
By default, browsers use between
   1.0 - 1.2 line-height. This is
         referred to as an
            initial value.
You can override this default line-
     height using the CSS
     line-height property.

 p
 {
      line-height: 140%;
 }
Line-height can be specified
with five different types of unit.
1. Line-height can be specified as
             normal.


 body
 {
        line-height: normal;
 }
2. Line-height can be specified as
             inherit.


 p
 {
      line-height: inherit;
 }
3. Line-height can be specified
  using a percentage value.


p
{
    line-height: 120%;
}
4. Line-height can be specified
     using a length value
      (using px, em etc).

p
{
    line-height: 20px;
}
5. Line-height can also be
specified using a number value
       (a unit-less value).

 p
 {
     line-height: 1.2;
 }
Shorthand
line-height
These five line-height values can
  also be specified using the
   font shorthand property.
The line-height value is written in
 conjunction with the font-size
value. The values are separated
           by a slash:
   <font-size>/<line-height>

         For example…
Normal value




body
{
       font: 100%/normal arial,
       helvetica, sans-serif;
}
Percentage value




body
{
       font: 100%/120% arial,
       helvetica, sans-serif;
}
Length value




body
{
       font: 100%/20px arial,
       helvetica, sans-serif;
}
Number value




body
{
       font: 100%/1.2 arial,
       helvetica, sans-serif;
}
Calculating
line-height
Some CSS properties are
inherited (passed down to
  descendant elements).
This is designed to make it
 easier for authors - so they do
not have to specify properties for
         all descendants.
EG. the color property is
inherited. If a color is applied to
  the body element, it will be
   passed down to all other
    elements on the page.
For line-height, inheritance is a
  little more complicated...
To see the various line-height
options in action, we will use the
     following HTML code:

 <h1>
        consect etuer adipi scing eli
 </h1>
 <p>
        Lorem ipsum dolor sit amet co
 </p>
 <div id="footer">
      Duis autem vel eum iriure dol
 </div>
This produces the following
      document tree:

             body              Parent element



h1            p             div#footer



      Descendant elements
We will also use the
            following CSS
(pixels used for font-size to simplify - though not recommended!):



body
{
        font-size: 16px;
        line-height: XXX;
}

h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
Example 1
The percentage value
The line-height has been set to a
  percentage value (120%).

 body
 {
        font-size: 16px;
        line-height: 120%;
 }

 h1 { font-size: 32px; }
 p { font-size: 16px; }
 #footer { font-size: 12px; }
The percentage value (120%)
 and the body element’s font size
   (16px) are used to create a
calculated value (16px x 120% =
 19.2px). This calculated value is
     inherited by descendant
             elements.
All descendants, regardless of
           their size, receive the same
          calculated value line-height.
element    font-size line height                          calculated line-height

body       16px      120%                                 16px x 120% = 19.2px

h1         32px      inherits calculated value - 19.2px   19.2px

p          16px      inherits calculated value - 19.2px   19.2px

#footer    12px      inherits calculated value - 19.2px   19.2px
The line-heights do not scale
 with the relevant font size.


                           Too tight

                           OK

                           Too loose
Example 2
the length value
The line-height has been set
using a length value (20px).

body
{
       font-size: 16px;
       line-height: 20px;
}

h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
The length value (20px) is
 inherited by descendant
         elements.
All elements, regardless of their
     font-size, receive the same line-
                   height.
element   font-size line height     calculated line-height

body      16px      20px            20px

h1        32px      inherits 20px   20px

p         16px      inherits 20px   20px

#footer   12px      inherits 20px   20px
Again, the line-heights do not
scale with the relevant font size.


                              Too tight

                              OK


                              Too loose
Example 3
the normal value
The line-height has been set to
 normal (which is approx 1.2).

body
{
       font-size: 16px;
       line-height: normal;
}

h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
In this case, the normal value
 rather than a calculated value is
      inherited by descendant
elements. Browsers may interpret
the actual normal value in slightly
           different ways.
All elements now have
     line-heights that are relative to
              their font-size.
element   font-size line height   calculated line-height

body      16px      normal        16px x approx 1.2 = approx 19.2px

h1        32px      normal        32px x aprox 1.2 = approx 38.4px

p         16px      normal        16px x approx 1.2 = approx 19.2px

#footer   12px      normal        11.2px x approx 1.2 = approx 13.44px
Now, the line-heights scale with
     the relevant font size.


                             OK


                             OK

                             OK
But what if you want the flexibility
  of the normal value, but to be
 able to specify the factor used?
  This is where number values
             come in.
Example 4
the number value
The line-height has been set to a
       number value (1.5).

 body
 {
        font-size: 16px;
        line-height: 1.5;
 }

 h1 { font-size: 32px; }
 p { font-size: 16px; }
 #footer { font-size: 12px; }
In this case, the factor (1.5)
rather than a calculated value is
    inherited by descendant
            elements.
All elements now have
       line-heights that are relative to
                their font-size.
element   font-size line height     calculated line-height

body      16px      1.5             16px x 1.5 = 24px

h1        32px      factor of 1.5   32px x 1.5 = 48px

p         16px      factor of 1.5   16px x 1.5 = 24px

#footer   12px      factor of 1.5   12px x 1.5 = 18px
Again, the line-heights scale with
      the relevant font size.


                              Too loose?



                              OK


                              OK
So, which is the
 best method?
Generally, a number value is the
best method for setting line-height
  as line-heights will then always
 scale with the relevant font-size.
It is hard to determine a “perfect
 line-height” as each situation is
  different. However, it is safe to
 assume that headings can have
    less relative line-height than
         paragraphs of text.
For example, all content could be
  set to 1.5, and then headings
         redefined to 1.2.

 body
 { line-height: 1.5; }

 h1, h2, h3, h4, h5, h6
 { line-height: 1.2; }
The Web Content Accessibility
  Guidelines (WCAG) 2.0 state:
“line spacing is at least space-
and-a-half within paragraphs”.
    This means that to be AAA
compliant, paragraph line-height
       should be set to 1.5


     http://www.w3.org/TR/WCAG20/ - 1.4.8 Visual Presentation
Looking deeper
into line-height
In order to understand
line-height more fully, we need to
   look at various types of CSS
               boxes.
Let’s start with a simple piece of
           HTML code.


 <p>
        The <em>emphasis</em>
        element is defined as
        “inline”.
 </p>
The code should be rendered
  like this in most browsers.




 The emphasis element is defined as
 inline.
There are four types of boxes
that are relevant in this sample.
Box type 1:
containing
  boxes
The paragraph is referred to as a
containing box in this case - as
    it contains other boxes.




   The emphasis element is defined as
   inline.
Box type 2:
inline boxes
Inside the paragraph are a series
         of inline boxes.




   The emphasis element is defined as
   inline.
Inline boxes do not form new
blocks of content; the content is
      distributed in lines.
The emphasis element is a type
        of inline box.




   The emphasis element is defined as
   inline.
Other boxes without specific
 markup are referred to as
anonymous inline boxes.




 The emphasis element is defined as
 inline.
Box type 3:
line boxes
Inline boxes sit side-by-side
within the containing box, forming
            line boxes.


Line boxes


    The emphasis element is defined as
    inline.
Box type 4:
content area
The content area is the invisible
 box that surrounds the text. Its
height is determined by the font-
               size.


                            Content area
Inline boxes
and line-height
Line height is applied to inline
boxes using a simple formula…
1. Find the difference between
the font-size and line-height. This
    will determine the leading.

             For example:
            Font-size: 16px
           Line-height: 20px
       Difference: 4px (leading)
2. Divide the leading in half to
 create a “half-leading” value.

  4px leading / 2 = 2px half-leading
3. Apply this half-leading value to
    the top and bottom of the
           content area.

                            2px half-leading



                            2px half-leading

        Content area
But things sometimes become a
   little more complicated...
The inline box generally wraps
  around the content box. Half-
leading sits above and below the
           content box.


                           Inline box
However, the inline box can
sometimes be smaller than the
       content area!
For example, if the line-height is
  smaller than the font size. In
this case, the inline box will honor
          the line height.
              For example:
            Font-size: 16px
           Line-height: 12px
         Inline box size: 12px
The content area then pokes out
    the top and bottom of the inline
    box. The half-leading collapses
     together to form the inline box
                 height.

                                         Inline box



Content area   Top half-leading   Bottom half-leading
Some notes on
line box height
The height of line boxes is
 determined by the tallest inline
box (or replaced element) inside.
The tallest inline box could be an
    anonymous inline box.

                              Line box
It could be an inline box with
    increased line-height.

                             Line box




     Increased line-height
Or an inline box with a
  larger font-size.

                          Line box




         Larger font
Or the presence of a superscript
          or subscript.

                           Line box




         Superscript
Or even the presence of a
replaced element, such as an
           image.
                                           Line box




 An inline image aligned to the baseline
Line boxes then stack on top of
      each other within the width of the
              containing box.
Containing box
                                      Line box




                                      Line box
Some final
  notes
Superscript
and subscript
The superscript and subscript
 elements can sometimes force
  the line box to be taller than
             normal.
                           Line box




         Superscript
You can fix this by setting these
elements to a line-height of “0”
which will remove all half-leading
       from the element.


 sup, sub
 { line-height: 0; }

           Hat tip: www.velvetblues.com/
IE6, line-height
and inline images
IE5/6 incorrectly removes the
 top half-leading when an inline
        image is present.
                              Line box



                    Top half-leading removed




  An inline image
This is a hard one to fix, but if
needed, margin can be added
to the top of the image to fake
the half-leading. This additional
margin should only be shown to
              IE5/6
 (using conditional comments)
We’re done!

More Related Content

What's hot

HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsSun Technlogies
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & videoHamza Zahid
 
Introduction to Javascript By Satyen
Introduction to Javascript By  SatyenIntroduction to Javascript By  Satyen
Introduction to Javascript By SatyenSatyen Pandya
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSMario Hernandez
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryFAKHRUN NISHA
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introductionapnwebdev
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html NotesNextGenr
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object ModelWebStackAcademy
 

What's hot (20)

HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
 
Html coding
Html codingHtml coding
Html coding
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Introduction to Javascript By Satyen
Introduction to Javascript By  SatyenIntroduction to Javascript By  Satyen
Introduction to Javascript By Satyen
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Html audio video
Html audio videoHtml audio video
Html audio video
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Html frames
Html framesHtml frames
Html frames
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
Html
HtmlHtml
Html
 

Viewers also liked

CSS line-height
CSS line-heightCSS line-height
CSS line-heightToby Yun
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley
 
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Toby Yun
 
Line Height (中文版)
Line Height (中文版)Line Height (中文版)
Line Height (中文版)bigCat Mao
 
CSS之继承详解
CSS之继承详解CSS之继承详解
CSS之继承详解张 鑫旭
 
腾讯艾瑞2010年中国网络游戏人群分析报告
腾讯艾瑞2010年中国网络游戏人群分析报告腾讯艾瑞2010年中国网络游戏人群分析报告
腾讯艾瑞2010年中国网络游戏人群分析报告GameLook .com
 
Maintainable CSS
Maintainable CSSMaintainable CSS
Maintainable CSSStephen Hay
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차Michael Yang
 
Vertical Rhythm and Modular Scale: Typesettings
Vertical Rhythm and Modular Scale: TypesettingsVertical Rhythm and Modular Scale: Typesettings
Vertical Rhythm and Modular Scale: TypesettingsIan Rose
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차Michael Yang
 

Viewers also liked (20)

CSS line-height
CSS line-heightCSS line-height
CSS line-height
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
Line Height (中文版)
Line Height (中文版)Line Height (中文版)
Line Height (中文版)
 
CSS之继承详解
CSS之继承详解CSS之继承详解
CSS之继承详解
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
腾讯艾瑞2010年中国网络游戏人群分析报告
腾讯艾瑞2010年中国网络游戏人群分析报告腾讯艾瑞2010年中国网络游戏人群分析报告
腾讯艾瑞2010年中国网络游戏人群分析报告
 
Maintainable CSS
Maintainable CSSMaintainable CSS
Maintainable CSS
 
CSS font-stacks
CSS font-stacksCSS font-stacks
CSS font-stacks
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 12일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 9일차
 
Presentation
PresentationPresentation
Presentation
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 11일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
 
Vertical Rhythm and Modular Scale: Typesettings
Vertical Rhythm and Modular Scale: TypesettingsVertical Rhythm and Modular Scale: Typesettings
Vertical Rhythm and Modular Scale: Typesettings
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 4일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
 

Similar to Line Height

Deep Dive into Line-Height
Deep Dive into Line-HeightDeep Dive into Line-Height
Deep Dive into Line-HeightRuss Weakley
 
5. Web Technology CSS Advanced
5. Web Technology CSS Advanced 5. Web Technology CSS Advanced
5. Web Technology CSS Advanced Jyoti Yadav
 
CSS INHERITANCE
CSS INHERITANCECSS INHERITANCE
CSS INHERITANCEAnuradha
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & TypographyDanny Calders
 
Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2Nur Fadli Utomo
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSSLarry King
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...syedfaisal759877
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in cssCK Yang
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet pptabhilashagupta
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common ErrorsHock Leng PUAH
 
Formating Text Using CSS
Formating Text Using CSSFormating Text Using CSS
Formating Text Using CSSMark Carter
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notesRex Wang
 

Similar to Line Height (20)

Deep Dive into Line-Height
Deep Dive into Line-HeightDeep Dive into Line-Height
Deep Dive into Line-Height
 
5. Web Technology CSS Advanced
5. Web Technology CSS Advanced 5. Web Technology CSS Advanced
5. Web Technology CSS Advanced
 
CSS INHERITANCE
CSS INHERITANCECSS INHERITANCE
CSS INHERITANCE
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
 
basics of css
basics of cssbasics of css
basics of css
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2
 
Styling Text With CSS
Styling Text With CSSStyling Text With CSS
Styling Text With CSS
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css summary
Css summaryCss summary
Css summary
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
 
Formating Text Using CSS
Formating Text Using CSSFormating Text Using CSS
Formating Text Using CSS
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
 
Css1 properties
Css1 propertiesCss1 properties
Css1 properties
 

More from Russ Weakley

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windowsRuss Weakley
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptionsRuss Weakley
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible namesRuss Weakley
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?Russ Weakley
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI componentsRuss Weakley
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?Russ Weakley
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design SystemsRuss Weakley
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletesRuss Weakley
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loaderRuss Weakley
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryRuss Weakley
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messagesRuss Weakley
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and ErrorsRuss Weakley
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?Russ Weakley
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern LibrariesRuss Weakley
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern librariesRuss Weakley
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Russ Weakley
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-completeRuss Weakley
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labelsRuss Weakley
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdownRuss Weakley
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchRuss Weakley
 

More from Russ Weakley (20)

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windows
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible names
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI components
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design Systems
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletes
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loader
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and glory
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messages
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and Errors
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern Libraries
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-complete
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labels
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdown
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
 

Recently uploaded

OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 

Recently uploaded (20)

OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 

Line Height

  • 3. Back in the “good old days” type was set by hand using printing presses.
  • 4. Printed material was created by setting out letters in rows. Each letter was created on an individual block.
  • 5. Leading, or lead strips were added between the lines of letters when additional vertical space was required.
  • 6. In CSS, line-height is used to control the vertical space between lines.
  • 7. However,the terms leading and half-leading are still used in association with CSS line-height.
  • 8. So how do you apply line-height?
  • 9. By default, browsers use between 1.0 - 1.2 line-height. This is referred to as an initial value.
  • 10. You can override this default line- height using the CSS line-height property. p { line-height: 140%; }
  • 11. Line-height can be specified with five different types of unit.
  • 12. 1. Line-height can be specified as normal. body { line-height: normal; }
  • 13. 2. Line-height can be specified as inherit. p { line-height: inherit; }
  • 14. 3. Line-height can be specified using a percentage value. p { line-height: 120%; }
  • 15. 4. Line-height can be specified using a length value (using px, em etc). p { line-height: 20px; }
  • 16. 5. Line-height can also be specified using a number value (a unit-less value). p { line-height: 1.2; }
  • 18. These five line-height values can also be specified using the font shorthand property.
  • 19. The line-height value is written in conjunction with the font-size value. The values are separated by a slash: <font-size>/<line-height> For example…
  • 20. Normal value body { font: 100%/normal arial, helvetica, sans-serif; }
  • 21. Percentage value body { font: 100%/120% arial, helvetica, sans-serif; }
  • 22. Length value body { font: 100%/20px arial, helvetica, sans-serif; }
  • 23. Number value body { font: 100%/1.2 arial, helvetica, sans-serif; }
  • 25. Some CSS properties are inherited (passed down to descendant elements).
  • 26. This is designed to make it easier for authors - so they do not have to specify properties for all descendants.
  • 27. EG. the color property is inherited. If a color is applied to the body element, it will be passed down to all other elements on the page.
  • 28. For line-height, inheritance is a little more complicated...
  • 29. To see the various line-height options in action, we will use the following HTML code: <h1> consect etuer adipi scing eli </h1> <p> Lorem ipsum dolor sit amet co </p> <div id="footer"> Duis autem vel eum iriure dol </div>
  • 30. This produces the following document tree: body Parent element h1 p div#footer Descendant elements
  • 31. We will also use the following CSS (pixels used for font-size to simplify - though not recommended!): body { font-size: 16px; line-height: XXX; } h1 { font-size: 32px; } p { font-size: 16px; } #footer { font-size: 12px; }
  • 33. The line-height has been set to a percentage value (120%). body { font-size: 16px; line-height: 120%; } h1 { font-size: 32px; } p { font-size: 16px; } #footer { font-size: 12px; }
  • 34. The percentage value (120%) and the body element’s font size (16px) are used to create a calculated value (16px x 120% = 19.2px). This calculated value is inherited by descendant elements.
  • 35. All descendants, regardless of their size, receive the same calculated value line-height. element font-size line height calculated line-height body 16px 120% 16px x 120% = 19.2px h1 32px inherits calculated value - 19.2px 19.2px p 16px inherits calculated value - 19.2px 19.2px #footer 12px inherits calculated value - 19.2px 19.2px
  • 36. The line-heights do not scale with the relevant font size. Too tight OK Too loose
  • 38. The line-height has been set using a length value (20px). body { font-size: 16px; line-height: 20px; } h1 { font-size: 32px; } p { font-size: 16px; } #footer { font-size: 12px; }
  • 39. The length value (20px) is inherited by descendant elements.
  • 40. All elements, regardless of their font-size, receive the same line- height. element font-size line height calculated line-height body 16px 20px 20px h1 32px inherits 20px 20px p 16px inherits 20px 20px #footer 12px inherits 20px 20px
  • 41. Again, the line-heights do not scale with the relevant font size. Too tight OK Too loose
  • 43. The line-height has been set to normal (which is approx 1.2). body { font-size: 16px; line-height: normal; } h1 { font-size: 32px; } p { font-size: 16px; } #footer { font-size: 12px; }
  • 44. In this case, the normal value rather than a calculated value is inherited by descendant elements. Browsers may interpret the actual normal value in slightly different ways.
  • 45. All elements now have line-heights that are relative to their font-size. element font-size line height calculated line-height body 16px normal 16px x approx 1.2 = approx 19.2px h1 32px normal 32px x aprox 1.2 = approx 38.4px p 16px normal 16px x approx 1.2 = approx 19.2px #footer 12px normal 11.2px x approx 1.2 = approx 13.44px
  • 46. Now, the line-heights scale with the relevant font size. OK OK OK
  • 47. But what if you want the flexibility of the normal value, but to be able to specify the factor used? This is where number values come in.
  • 49. The line-height has been set to a number value (1.5). body { font-size: 16px; line-height: 1.5; } h1 { font-size: 32px; } p { font-size: 16px; } #footer { font-size: 12px; }
  • 50. In this case, the factor (1.5) rather than a calculated value is inherited by descendant elements.
  • 51. All elements now have line-heights that are relative to their font-size. element font-size line height calculated line-height body 16px 1.5 16px x 1.5 = 24px h1 32px factor of 1.5 32px x 1.5 = 48px p 16px factor of 1.5 16px x 1.5 = 24px #footer 12px factor of 1.5 12px x 1.5 = 18px
  • 52. Again, the line-heights scale with the relevant font size. Too loose? OK OK
  • 53. So, which is the best method?
  • 54. Generally, a number value is the best method for setting line-height as line-heights will then always scale with the relevant font-size.
  • 55. It is hard to determine a “perfect line-height” as each situation is different. However, it is safe to assume that headings can have less relative line-height than paragraphs of text.
  • 56. For example, all content could be set to 1.5, and then headings redefined to 1.2. body { line-height: 1.5; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
  • 57. The Web Content Accessibility Guidelines (WCAG) 2.0 state: “line spacing is at least space- and-a-half within paragraphs”. This means that to be AAA compliant, paragraph line-height should be set to 1.5 http://www.w3.org/TR/WCAG20/ - 1.4.8 Visual Presentation
  • 59. In order to understand line-height more fully, we need to look at various types of CSS boxes.
  • 60. Let’s start with a simple piece of HTML code. <p> The <em>emphasis</em> element is defined as “inline”. </p>
  • 61. The code should be rendered like this in most browsers. The emphasis element is defined as inline.
  • 62. There are four types of boxes that are relevant in this sample.
  • 64. The paragraph is referred to as a containing box in this case - as it contains other boxes. The emphasis element is defined as inline.
  • 66. Inside the paragraph are a series of inline boxes. The emphasis element is defined as inline.
  • 67. Inline boxes do not form new blocks of content; the content is distributed in lines.
  • 68. The emphasis element is a type of inline box. The emphasis element is defined as inline.
  • 69. Other boxes without specific markup are referred to as anonymous inline boxes. The emphasis element is defined as inline.
  • 71. Inline boxes sit side-by-side within the containing box, forming line boxes. Line boxes The emphasis element is defined as inline.
  • 73. The content area is the invisible box that surrounds the text. Its height is determined by the font- size. Content area
  • 75. Line height is applied to inline boxes using a simple formula…
  • 76. 1. Find the difference between the font-size and line-height. This will determine the leading. For example: Font-size: 16px Line-height: 20px Difference: 4px (leading)
  • 77. 2. Divide the leading in half to create a “half-leading” value. 4px leading / 2 = 2px half-leading
  • 78. 3. Apply this half-leading value to the top and bottom of the content area. 2px half-leading 2px half-leading Content area
  • 79. But things sometimes become a little more complicated...
  • 80. The inline box generally wraps around the content box. Half- leading sits above and below the content box. Inline box
  • 81. However, the inline box can sometimes be smaller than the content area!
  • 82. For example, if the line-height is smaller than the font size. In this case, the inline box will honor the line height. For example: Font-size: 16px Line-height: 12px Inline box size: 12px
  • 83. The content area then pokes out the top and bottom of the inline box. The half-leading collapses together to form the inline box height. Inline box Content area Top half-leading Bottom half-leading
  • 84. Some notes on line box height
  • 85. The height of line boxes is determined by the tallest inline box (or replaced element) inside.
  • 86. The tallest inline box could be an anonymous inline box. Line box
  • 87. It could be an inline box with increased line-height. Line box Increased line-height
  • 88. Or an inline box with a larger font-size. Line box Larger font
  • 89. Or the presence of a superscript or subscript. Line box Superscript
  • 90. Or even the presence of a replaced element, such as an image. Line box An inline image aligned to the baseline
  • 91. Line boxes then stack on top of each other within the width of the containing box. Containing box Line box Line box
  • 92. Some final notes
  • 94. The superscript and subscript elements can sometimes force the line box to be taller than normal. Line box Superscript
  • 95. You can fix this by setting these elements to a line-height of “0” which will remove all half-leading from the element. sup, sub { line-height: 0; } Hat tip: www.velvetblues.com/
  • 97. IE5/6 incorrectly removes the top half-leading when an inline image is present. Line box Top half-leading removed An inline image
  • 98. This is a hard one to fix, but if needed, margin can be added to the top of the image to fake the half-leading. This additional margin should only be shown to IE5/6 (using conditional comments)