Cover image for Practical Responsive Typography

Practical Responsive Typography

Author Dario Calonaci
Release Date: 2016/07/01
ISBN: 9781785884634
Topic:
0%
55
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Get your attractive type design up and running in the browser with real-world, responsive, and tailored tutorials

About This Book

  • No coding experience necessary - get started with responsive typography today!
  • Find out how to customize your own typography designs to truly own your website's identity
  • From the basics to cutting-edge design, this book is the perfect guide

Who This Book Is For

This book is for web developers familiar with the basics of HTML5 and CSS3 who want to learn how to implement responsive typography. No coding experience is required, so dive in and get started!

What You Will Learn

  • Customize and personalize fonts on a responsive website
  • Learn how to write CSS3 rules for viewports
  • Define media queries and write them using CSS3 and HTML5
  • Implement SASS typography techniques to minimize the CSS output and manage the font variables
  • Get to grips with dropcaps and learn how to use them effectively on the web

In Detail

Typography is an essential part of any website’s design. It can help you stand out from the crowd, communicate with clarity, and cultivate a distinctive identity.

Practical Responsive Typography demonstrates how to use typography to greatest effect. With this book you won't underestimate it's importance - you'll be in complete control over this crucial component of web design. From scaling and optimizing screen spaces to using a range of different web fonts, you'll quickly get up to speed with the practical considerations behind successful typography.

But more than the fundamentals, you'll also find out how to go further by customizing typography designs to suit your identity.

Style and approach

This is an easy-to-follow guide full of real-world examples and tutorials. Each typography style and rule is clearly explained and placed in context.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Practical Responsive Typography
    1. Table of Contents
    2. Practical Responsive Typography
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Web Typography
      1. Developing your knowledge
        1. Anatomy of the character
        2. Typeface or font? A guide to the distinction
      2. Typefaces classification
        1. Serifs
        2. Old Style or Humanist
        3. Transitional Serifs
        4. Modern Serifs
        5. Slab Serifs
      3. Sans Serifs
        1. Grotesque Sans
        2. Neo-Grotesque Sans
        3. Humanist font
        4. Geometric font
        5. Script typefaces
          1. Formal script
        6. Casual script
        7. Monospaced typefaces
        8. Display typefaces
      4. Expressing different moods
        1. Serifs vs Sans
        2. Scripts vs scripts
        3. Display typefaces
      5. Combining typefaces
      6. Typography properties
        1. Kerning
        2. Tracking
        3. Ligatures
        4. Leading
        5. Information hierarchy – giving order to your text
        6. Alignments
        7. Rag
        8. Justification of text
      7. Summary
    9. 2. Responsive Typography
      1. Creating the page
        1. Let's wander through CSS
        2. Up to letter and text group!
      2. Ligatures
      3. Hierarchy
      4. Example and exercise!
        1. The intrinsic nature of type
      5. Summary
    10. 3. Web Fonts and Services
      1. The free services for font embedding
        1. CSS @font-face
          1. The local property
        2. Bold and italic
        3. Problems with @font-face
      2. Font Squirrel and its generator
        1. And now what?
      3. Google web fonts
        1. Time for a couple of paid services
        2. Typekit
        3. Cloud typography
      4. Summary
    11. 4. Modern Scale
      1. What is a font scale?
        1. Creating a new scale
      2. What is an em?
        1. Why are ems important?
        2. Defect in the em element
      3. The CSS3 solution
        1. What to expect from rems?
        2. Time to get back to the scale
      4. A more complex exercise
        1. Vertical rhythm
        2. A little note on ems and rems
      5. Summary
    12. 5. Viewport and Size
      1. The viewport concept
      2. CSS3 custom units
      3. Summary
    13. 6. Media Queries
      1. How to write them
      2. Media queries for responsive design
      3. Summary
    14. 7. Sass and Typography
      1. CSS pre-processors and Sass
        1. Sass and LESS: A comparison
          1. Installing Sass
          2. Your small Sass tutorial
          3. More Sass properties
          4. Sass for responsive typography
          5. Too many breakpoints
          6. Adding line-height
      2. Summary
    15. 8. Three Step Responsive
      1. It actually takes more than three steps
      2. A Sass powered one page website
        1. Another solution using JRibbble
          1. Sass stylizing our carousel
      3. Modular typography scale with Sass
      4. Sass Mixin for easy responsiveness
      5. A Sass generated responsive grid
      6. Summary
    16. 9. Future Responsive – Hinting
      1. What is font hinting?
        1. The four different hinting processes
          1. Black and white rendering
          2. Gray-scale rendering
          3. ClearType rendering
          4. DirectWrite rendering
          5. Difficulties for type designers – and hinting's future
          6. Another problem with pixel densities
          7. My solution for hinting on the Web
      2. Summary
    17. 10. Future Responsive – Drop Caps and Shapes
      1. What drop caps are and how to use them
        1. Drop cap with an image
        2. Letter over an image
        3. Creating a class with no image
        4. Drop caps with pseudo-elements
      2. Onto the future – Shaping your text
        1. A shape tutorial
        2. Defining a shape using an image
        3. CSS shapes in responsive web design
        4. In the future
      3. Summary
    18. Index
3.139.67.5