eBook - ePub
Practical Responsive Typography
Dario Calonaci
This is a test
Share book
- 218 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
eBook - ePub
Practical Responsive Typography
Dario Calonaci
Book details
Book preview
Table of contents
Citations
About This Book
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.
Frequently asked questions
How do I cancel my subscription?
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Practical Responsive Typography an online PDF/ePUB?
Yes, you can access Practical Responsive Typography by Dario Calonaci in PDF and/or ePUB format, as well as other popular books in Informatik & Webprogrammierung. We have over one million books available in our catalogue for you to explore.
Information
Practical Responsive Typography
Table of Contents
Practical Responsive Typography
Credits
About the Author
About the Reviewer
www.PacktPub.com
eBooks, discount offers, and more
Why subscribe?
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Web Typography
Developing your knowledge
Anatomy of the character
Typeface or font? A guide to the distinction
Typefaces classification
Serifs
Old Style or Humanist
Transitional Serifs
Modern Serifs
Slab Serifs
Sans Serifs
Grotesque Sans
Neo-Grotesque Sans
Humanist font
Geometric font
Script typefaces
Formal script
Casual script
Monospaced typefaces
Display typefaces
Expressing different moods
Serifs vs Sans
Scripts vs scripts
Display typefaces
Combining typefaces
Typography properties
Kerning
Tracking
Ligatures
Leading
Information hierarchy – giving order to your text
Alignments
Rag
Justification of text
Summary
2. Responsive Typography
Creating the page
Let's wander through CSS
Up to letter and text group!
Ligatures
Hierarchy
Example and exercise!
The intrinsic nature of type
Summary
3. Web Fonts and Services
The free services for font embedding
CSS @font-face
The local property
Bold and italic
Problems with @font-face
Font Squirrel and its generator
And now what?
Google web fonts
Time for a couple of paid services
Typekit
Cloud typography
Summary
4. Modern Scale
What is a font scale?
Creating a new scale
What is an em?
Why are ems important?
Defect in the em element
The CSS3 solution
What to expect from rems?
Time to get back to the scale
A more complex exercise
Vertical rhythm
A little note on ems and rems
Summary
5. Viewport and Size
The viewport concept
CSS3 custom units
Summary
6. Media Queries
How to write them
Media queries for responsive design
Summary
7. Sass and Typography
CSS pre-processors and Sass
Sass and LESS: A comparison
Installing Sass
Your small Sass tutorial
More Sass properties
Sass for responsive typography
Too many breakpoints
Adding line-height
Summary
8. Three Step Responsive
It actually takes more than three steps
A Sass powered one page website
Another solution using JRibbble
Sass stylizing our carousel
Modular typography scale with Sass
Sass Mixin for easy responsiveness
A Sass generated responsive grid
Summary
9. Future Responsive – Hinting
What is font hinting?
The four different hinting processes
Black and white rendering
Gray-scale rendering
ClearType rendering
DirectWrite rendering
Difficulties for type designers – and hinting's future
Another problem with pixel densities
My solution for hinting on the Web
Summary
10. Future Responsive – Drop Caps and Shapes
What drop caps are and how to use them
Drop cap with an image
Letter over an image
Creating a class with no image
Drop caps with pseudo-elements
Onto the future – Shaping your text
A shape tutorial
Defining a shape using an image
CSS shapes in responsive web design
In the future
Summary
Index
Practical Responsive Typography
Copyright © 2016 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: July 2016
Production reference: 2260716
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78588-463-4
www.packtpub.com
Credits
Author
Dario Calonaci
Reviewer
Chen Hui Jing
Commissioning Editor
Amarabha Banerjee
Acquisition Editor
Tushar Gupta
Content Development Editor
Mamata Walkar
Technical Editor
Nirant Carvalho
Copy Editors
Safis Editing
Madhusudan Uchil
Project Coordinator
Shweta H Birwatkar
Proofreader
Safis Editing
Indexer
Pratik Shirodkar
Graphics
Kirk D'Penha
Production Coordinator
Arvindkumar Gupta
Cover Work
Arvindkumar Gupta
About the Author
Dario Calonaci is a published author, correspondent, and professional advisor as well as design writer and reviewer for many publications, both print and online. Having worked on projects for The Ritz-Carlton and on Obama for America '12, The United Nations Rio+20 Conference, he's a well-known expert in the field of typography, which made him start teaching that and web design in his early twenties! As a member of various international groups, his art has been published worldwide in a plethora of books and magazines, from Phadon to Zeixs, and has been exposed in many openings, from New York's Times Square to the Senate Library in Rome.
He runs his own design firm at Kerned Studio in Florence for clients such as Gucci, Calvin Klein, and Berni among many others. You can take a look at his work on www.kernedstudio.com and www.dariocalonaci.com.
About the Reviewer
Chen Hui Jing is a self-taught designer and developer from Singapore. Reducing the lines of code in her web projects makes her extremely happy. She used to play basketball full time and launched her web career during downtime between training sessions.
As a strong believer of HTML and CSS being the foundation of the Web, and she started Talk.CSS, the first CSS-centric meetup in Singapore, to encourage developers to further their understanding of CSS and how it can improve our designs on the Web.
2323__per...