25,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 213
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Practical Responsive Typography
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.
www.PacktPub.com
eBooks, discount offers, and more
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Preface
This book will take your typography knowledge from starter level to pro, focusing on clear writing, simple real-world examples, and the application of both of these to the exciting World Wide Web!
Typography is one of the most important parts of any website's design. This book will show you, with practical examples, how you can implement practical typography techniques to make your site responsive. This book will be a mix of responsive typography concepts and its practical implementations. The best way to approach this topic is to give users a clear roadmap to the fundamental ways of responsive typography, scaling and optimizing screen spaces, using Web Fonts and the multiple ways to do so, and the common pitfalls in this process. Then, the book will move towards real hands-on examples that will make you design your own responsive typography designs and customize existing designs without any external help.
What this book covers
Chapter 1, Web Typography, introduces you to all the basic knowledge about typography.
Chapter 2, Responsive Typography, explains the basic application of the general knowledge of typography—applied on the Web.
Chapter 3, Web Fonts and Services, provides an overhauled look at the different solutions for custom fonts on the Web.
Chapter 4, Modern Scale, is an introduction to typography scales—and how to apply them.
Chapter 5, Viewport and Size, provides an introduction to viewport area and units—and, again, how to use them.
Chapter 6, Media Queries, explains what media queries are—and, of course, how to use them.
Chapter 7, Sass and Typography, is an introduction to Sass, what it is, and how it can help you write better CSS, along with a lot of examples of using it for better typography.
Chapter 8, Three Step Responsive, is a follow-up to the previous chapters, summarizing all the previous information and explaining how to apply it to your website's typography.
Chapter 9, Future Responsive – Hinting, takes a quick look at hinting, what it is, and an example solution to what will likely come in the future.
Chapter 10, Future Responsive – Drop Caps and Shapes, provides a quick look at the future of Web typography, with the introduction of drop caps and shapes on the Web—and how to code them now.
What you need for this book
You only need a code editor, Koala or any Sass-processing software, and a web browser.
Who this book is for
This book is for web developers who are familiar with the basics of HTML5 and CSS3 and want to learn how to implement responsive typography efficiently and effectively. However, you do not require any coding experience to make full use of this book.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "It's time to add some CSS properties to the preceding <p>."
A block of code is set as follows:
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "You'll just have to click that Publish button from time to time and that's it."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this book 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 files e-mailed directly to you.
You can download the code files by following these steps:
You can also download the code files by clicking on the Code Files button on the book's webpage at the Packt Publishing website. This page can be accessed by entering the book's name in the Search box. Please note that you need to be logged in to your Packt account.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Practical-Responsive-Typography. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
Chapter 1. Web Typography
Hello! Wonder no more about typography, it's fascinating mysteries, sensual shapes, and everything else you wanted to know about it; this book is about to reveal everything on the subject for you! Typography forms the base of a good written communication—it's an art form in itself, the art of drawing with words. While speaking you set the mood with tone and gesture, with writing nothing is more important than the words themselves and how they are portrayed.
Every letter, every curve, and every shape in the written form conveys feelings; so it's important to learn everything about it if you want to be a better designer.
You also need to know how readable your text is, therefore you have to set it up following some natural constraints our eyes and minds have built in, how white space influences your message, how every form should be taken into consideration in the writing of a text and this book will tell you exactly that!
Plus a little more!
You will also learn how to approach all of the above in today number one medium, the World Wide Web. Since 95 percent of the Web is made of typography, according to Oliver Reichenstein, it's only logical that if you want to approach the Web you surely need to understand it better.
Through this first chapter, you'll learn all the basics of typography and will be introduced to it core features, such as:
Note that typography, the art of drawing with words, is really ancient, as much as 3200 years prior to the appearance of Christ and the very first book on this matter is the splendid Manuale Tipografico from Giambattista Bodoni, which he self-published in 1818. Taking into consideration all the old data, and the new knowledge, everything started from back then and every rule that has been born in print is still valid today, even for the different medium that the Web is.
Developing your knowledge
From now on, I will be guiding you within the beautiful world that a word is and how it is expressed visually. You won't need anything more than your curiosity and an open and receptive mind.
No software, no technology unless you're reading this book on a screen and even in that case, you're ready to go!
How good is that!
Anatomy of the character
In this section, you will learn the terminology and structure of a letter. Knowing the what and where will make you a better writer and more importantly, a better reader. You'll start recognizing other people's mistakes, the world is full of them
The following points are the real foundation of writing, what lies beneath the splendid coherent surface of a text:
Image courtesy - TheTypeStudio
Typeface or font? A guide to the distinction
After seeing each character on its own, lets look at the bigger picture:
Typefaces are made of multiple fonts, which are made of multiple characters.
As of today, whereas type is laid principally on screens and not on paper, this distinction practically merged the two terms into the generic font one. Old printing and typesetting machines used letters carved out of metal imposed on woodblocks that needed to be covered in ink and then pushed on paper, leaving a trace. For this reason, each letter was unique and had to be made from scratch, for each weight and style within the same typeface. While your font may have 512 glyphs that weigh a certain kilobytes, the original handmade version had 512 physical blocks, (one for each letter), that weighed kilos. Therefore, with so many objects around that needed to be ordered in some way and so the division between style set and the complete typeface was born.
In addition, the same story of moving blocks gave birth to almost every other typography related terminology that we use today, even in the digital age. They will be addressed later in this topic.
Typefaces classification
The most commonly used type classification is based on the technical style and as such it's the one we are going to analyze and use. They are as follows:
Serifs
Serifs are referred to as such because of the small details that extend from the ending shapes of the characters; the origin of the word itself is obscure, various explanations have been given but none has been accepted as resolute.
Their origin can be traced back to the Latin alphabets of Roman times, probably because of the flares of the brush marks in corners, which were later chiseled in stone by the carvers.
They generally give better readability in print than on a screen, probably because of the better definition and evolution of the former in hundreds of years, while the latter technology is, on an evolutionary path, a newborn.
With the latest technologies and the high definition monitors that can rival the print definition, multiple scientific studies have been found inconclusive, showing that there is no discernible difference in readability between sans and serifs on the screen and as of today they are both used on the Web.
Within this general definition, there are multiples sub-families, as Old Style or Humanist.
Old Style or Humanist
The oldest ones, dating as far back as the mid 1400s are recognized for the diagonal guide on which the characters are built on; these are clearly visible for example on the e and o of Adobe Jenson.
Transitional Serifs
They are neither antique nor modern and they date back to the 1700s and are generally numerous.
They tend to abandon some of the diagonal stress, but not all of them, especially keeping the o. Georgia and Baskerville are some well-known examples.
Modern Serifs
Modern Serifs tend to rely on the contrast between thick and thin strokes, abandon diagonal for vertical stress, and on more straight serifs. They appeared in the late 1700s.
Bodoni and Didot are certainly the most famous typefaces in this family.
Slab Serifs
Slab Serifs have little to no contrast between strokes, thick serifs, and sometimes appear with fixed widths, the underlying base resembles one of the sans more.
American Typewriter is the most famous typefaces in this family as shown in the following image:
Sans Serifs
They are named so due to the loss of the decorative serifs, in French "sans" stands for "without". Sans Serif is a more recent invention, since it was born in the late 18th century.
They are divided into the following four sub-families:
Grotesque Sans
It is the earliest of the bunch; its appearance is similar to the serif with contrasted strokes but without serifs and with angled terminals
Franklin Gothic is one of the most famous typefaces in this family.
Neo-Grotesque Sans
It is plain looking with little to no contrast, small apertures, and horizontal terminals. They are one of the most common font styles ranging from Arial and Helvetica to Universe.
Humanist font
They have a friendly tone due to the calligraphic style with a mixture of different widths characters and, most of the times, contrasted strokes.
Gill Sans being the flag-carrier.
Geometric font
Based on the geometric and rigorous shapes, they are more modern and are used less for body copy. They have a general simplicity but readability of their characters is difficult.
Futura is certainly the most famous geometric font.
Script typefaces
They are usually classified into two sub-families based upon the handwriting, with cursive aspect and connected letterforms. They are as follows:
Formal script
They are reminiscent of the handwritten letterforms common in the 17th and 18th centuries, sometimes they are also based on handwritings of famous people.
They are commonly used for elevated and highly elegant designs and are certainly unusable for long body copy.
Kunstler Script is a relatively recent formal script.
Casual script
This is less precise and tends to resemble a more modern and fast handwriting. They are as recent as the mid-twentieth century.
Mistral is certainly the most famous casual script.
Monospaced typefaces
Almost all the aforementioned families are proportional in their style, (each character takes up space that is proportional to its width). This sub-family addresses each character width as the same, with narrower ones, such as i
