08 ⎯ Big Text
07 ⎯ Big Text, Small Text and Button
Ardi Gorgo
Visual Designer, Art Director
and Illustrator based in São
Paulo –– Brazil
Let’s create your unique story together?
06 ⎯ Text in 1/3 Columns with Divider
Relying on systems fonts greatly improves page performance and can also help your web application/siteblend in with the user’s operating system.
Readability is strongly linked to familiarity, so this helps create a more fluid reading experience, allowing your users to focus on your content. Varying the font-weight of different pieces of text can help create contrast between pieces of information.
It can help call attention to a piece of content, or help to make a smaller font-size a bit more readable. In Elements of Typographic Style, Robert Bringhurst suggests we keep two things in mind when playing with font-weight. Use bold weights sparingly. Font-weight should decrease as font-size increases.
05 ⎯ Large Text in 1/2 Columns on Background Secondary Color
SPACING COMES IN TWO FLAVORS. DEPENDING ON BORDERS AND BACKGROUND COLORS, THE DIFFERENCE BETWEEN PADDING AND MARGIN CAN BE INVISIBLE TO THE NAKED EYE OF THE USER. BUT TO A DEVELOPER, THEY SERVE DIFFERENT ROLES. MOST CODEBASES LACK A RATIO BASED SCALE AND INSTEAD ARE LITTERED WITH VALUES THAT ARE JUST MAGIC NUMBERS. THIS IS BAD.
GOOD DESIGN IS BASED ON MATH. CERTAIN PATTERNS AND RATIOS ARE SO PREVELANT IN NATURE AND MUSIC THAT THEY CAN’T BE DENIED AS ELEGANT DESIGN SOLUTIONS. EVEN IN THE 18TH CENTURY, PAGES IN BOOKS WERE DESIGNED WITH RATIOS. IN THE 21ST CENTURY, WE HAVE GOTTEN AWAY FROM THIS ON THE WEB, OFTEN USING MAGIC NUMBERS TO MATCH A ‘SPEC’ THAT HAS BEEN PRODUCED IN A GRAPHICS PROGRAM SUCH AS PHOTOSHOP, ILLUSTRATOR, OR SKETCH. WHILE THESE PROGRAMS ARE USEFUL FOR SKETCHING IDEAS, THEY AREN’T 100% ACCURATE IN THEIR REFLECTION OF HOW THE WEB WORKS ACROSS DEVICE SIZES OR HOW THINGS GET DRAWN TO THE SCREEN.
04 ⎯ Large Text with Drop Cap
To create and design an easily readable interface, you don’t need more than 40 font-sizes. A simple ratio-based scale with 8 options should suffice. Using the class extension namespaces you can set the font-size for any particular breakpoint that you desire.
Don’t spend time constantly overriding font-sizes in your css. If you don’t like a default font-size for an element, use the utilities to quickly make the text larger or smaller until it looks just right.
03 ⎯ Narrow Centered Text on Background Primary Color
EVERYTHING SHOULD BE 100% RESPONSIVE. YOUR WEBSITE SHOULD WORK REGARDLESS OF A USER’S DEVICE OR SCREENSIZE. NO MATTER THE LIGHTING, OR THE DEVICE, FONT-SIZES SHOULD BE LARGE ENOUGH AND CONTRAST SHOULD BE HIGH ENOUGH FOR YOUR USERS TO EASILY READ YOUR CONTENT.
02 ⎯ Text
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
01 ⎯ Large Text
Documentation is really important for a developer. Right drom it you get to know the product. We tried to describe all the components and provide the set-up instructions.