Grille typographique: La théorie Après la découverte de LESS, et de SASS, ma première idée pour exploiter ce langage, concernait la typographie. Même si les frameworks CSS proposent des styles pour la typographie, il est fréquent de devoir les modifier, pour changer la police, modifier la taille de base et/ou la taille des titres. Utiliser SASS pour se construire une feuille de styles typographique paramétrables est donc une idée assez logique. Avant de rentrer dans le codage, il m’a semblé utile de faire un point sur les éléments clés de la typographie. Pour écrire cet article, je me suis principalement basé sur deux articles de Smashing Magazine: Le premier Technical Web Typography: Guidelines and Techniques (2011), nous donne les principales règles à suivre, le second, plus ancien (2009), Typographic Design Patterns and Best Practices, compile les données typographiques d’un certain nombre de sites. La construction d’une feuille de styles typographiques comporte globalement 6 étapes: Choix de la police de caractères
Front-end Style Guides We all know that feeling: some time after we launch a site, new designers and developers come in and make adjustments. They add styles that don’t fit with the content, use typefaces that make us cringe, or chuck in bloated code. But if we didn’t leave behind any documentation, we can’t really blame them for messing up our hard work. To counter this problem, graphic designers are often commissioned to produce style guides as part of a rebranding project. Design guidelines Some design guidelines focus on visual branding and identity. Some guidelines go further, encompassing a whole experience, from the visual branding to the messaging, and the icon sets used. The BBC’s Global Experience Language. Design guidelines may be brief and loose to promote creativity, like Mozilla’s “brand toolkit”, or be precise and run to many pages to encourage greater conformity, such as Apple’s “Human Interface Guidelines”. Code standards documents We can make a similar argument for code. Paul Lloyd’s style guide
Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency Advertisement Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you’re having, or it could even be a question about a philosophical approach. If you’re interested in exploring more Q&A, there’s a bunch more in my author archive. Resolution Aware Sprites Joshua Bullock asks: Your last round of questions was titled “Box-Sizing And CSS Sprites” which offered some great answers for two separate items, but didn’t take them that one step further for responsive design. Retina displays made a really quick and big jump in resolution. If you are drawing a solid red box on the screen, no problem at all! One solution is to make all your original images bigger. Your question was explicitly about sprites. Here’s a demo of that. Liquid — Fixed — Liquid See demo.
Free fonts download for Windows and Mac - FontPalace.com Styleguide — Paul Robert Lloyd This document is a guide to the mark-up styles used throughout the site. Parts of this markup guide are attributable to Dave Shea, and licensed under a Creative Commons License. Sections The main page header of this guide is an h1 element. Any header elements may include links, as depicted in the example. The secondary header above is an h2 element, which may be used for any form of important page-level header. Third-Level Header The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy. Fourth-Level Header The header above is an h4 element, which may be used for any form of page-level header which falls below the h3 header in a document hierarchy. Fifth-Level Header The header above is an h5 element, which may be used for any form of page-level header which falls below the h4 header in a document hierarchy. Sixth-Level Header Grouping content Paragraphs All paragraphs are wrapped in p tags. Horizontal rule ! Bob’s
Designing For Device Orientation: From Portrait To Landscape Advertisement The accelerometer embedded in our smart devices is typically used to align the screen depending on the orientation of the device, i.e. when switching between portrait and landscape modes. This capability provides great opportunities to create better user experiences because it offers an additional layout with a simple turn of a device, and without pressing any buttons. However, designing for device orientation brings various challenges and requires careful thinking. The experience must be as unobtrusive and transparent as possible, and we must understand the context of use for this functionality. Nearly all mobile and tablet applications would benefit from being designed for device orientation. Using Device Orientation For A Secondary Display YouTube’s mobile application is a great example of device orientation design. However, using orientation to display a secondary interface can be confusing for users. YouTube’s mobile interface in portrait and landscape modes. Fluid
Droid Fonts from Ascender Corporation Coding Q&A With Chris Coyier: Code Smell and Type on a Grid Advertisement Howdy, folks! Welcome to the new incarnation of Smashing Magazine’s Q&A. It’s going to work like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you’re having, or it could be a question about a philosophical approach. We’ve done a bit of this kind of exchange before with a wider scope, so if you enjoy reading the Q&A, check out my author archive for more of them. Designing For Email Andrejs Abrickis asks: “Sometimes I face trouble with HTML email design and the proper CSS code. First and foremost, I recommend keeping emails very simple. If you are certain you need to make an HTML email, I’d again err on the side of simplicity. But you wanted to know about cross-client compatibility and testing. The two simple rules of thumb for HTML email development are: Use tables for layout. Type On A Grid “1. 1. 2.
Fonts Droid Serif Grumpy wizards make toxic brew for the evil Queen and Jack. Normal 400Grumpy wizards make toxic brew for the evil Queen and Jack. Normal 400 ItalicGrumpy wizards make toxic brew for the evil Queen and Jack. Bold 700Grumpy wizards make toxic brew for the evil Queen and Jack. Bold 700 ItalicGrumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz ªª µµ ºº ßß àà áá ââ ãã ää åå ææ çç èè éé êê ëë ìì íí îî ïï ðð ññ òò óó ôô õõ öö øø ùù úú ûû üü ýý þþ ÿÿ The Creative Way To Maximize Design Ideas With Type Advertisement As with most designers, being sure that we explore and select the most successful, memorable and stimulating designs is a vital aspect that underpins every project we undertake. For us, the beginning of a new challenge has never been as simple as asking ourselves what might be the best avenue to take and then sitting down at a computer and attempting to fulfill that idea. After researching the subject matter, we will almost always begin with a sheet of paper and pencil and draw out a variety of design options to help bring together and develop the breadth of ideas that are maturing in our minds. An example of mark-making that helps to formulate design ideas for working with type and image. Why Textural And Tonal Qualities Of Type Should Be Addressed In Drawing Working with art direction from Liudas Parulskis and Vilmas Narecionis, Jacek Utko has designed some captivating pages for the weekend section of Lithuanias Verslo Zinios. Finding The Right Marking Tools And Paper (al)
Un guide simple pour la typographie responsive Le 14/12/2012 dans Développement Aujourd’hui je vous propose une traduction de l’article A simple guide to responsive typography de Cameron Chapman traitant d’un aspect peu abordé dans les techniques de responsive design. La plus grande partie des articles qui traitent du « responsive design » mettent l’accent sur 2 aspects : une grille fluide et flexible, des images fluides et flexibles. La plupart d’entre eux ne parlent pas de la typographie. Et pourtant pour la majorité des sites Internet, le contenu est l’élément le plus important. Certes, pour les sites où le contenu principal est composé d’images ou de vidéos, cet aspect devient un peu moins important, mais il ne devrait quand même pas être négligé. La bonne nouvelle est que le responsive design au niveau typographique n’est pas particulièrement difficile à mettre en place. Principe de la typographie responsive Il existe deux façons principales de mettre en place une typographie responsive. Le maintien d’une longueur de ligne optimale
Best 20 webfonts from Google Web Fonts and @font-face embedding | Blog At the moment there are several ways to use non-system fonts on a website. We will focus on the two least complicated, least expensive systems, Google Web Fonts and the @font-face rule. Fear not, we have not ruled out other paid methods such as Typekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK or Fontspring for future posts as they certainly offer high quality typefaces and deserve to be considered. Basically, there are two implementation models: 1. 2. Web font embedding services Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. Implementation It really is quick and simple: 1. 2. 3. Here you can consult a extended manual for styles, script subsets, and using multiple fonts. Top recommended fonts from Google Web Fonts You will find many unfavorable reviews about the quality of GWF’s fonts and the amateur nature of many typefaces. Open Sans Josefin Slab Arvo Lato Vollkorn Abril Fatface Ubuntu PT Sans + PT Serif Old Standard TT Droid Sans