Typography Is The Foundation Of Web Design

50 Helpful Typography Tools And Resources Advertisement We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers. We are always looking for such resources. We compile them, carefully select the best ones and then prepare them for our round-ups. And now it’s time to present a beautiful fresh dose of typography-related resources. To help you improve the typography in your designs, we’re presenting here useful new articles, tools and resources related to typography. You may be interested in the following related posts: Typography: References and Useful Resources The Taxonomy of TypeThis article’s purpose is to help us as designers to distinguish basic properties of types. Typedia: A Shared Encyclopedia of TypefacesTypedia is a resource to classify, categorize, and connect typefaces. Typeface Anatomy and GlossaryMany fonts have abbreviations in their names. Finding The Right Type Combining Type Type Design

JS Bin: Built For Sharing, Education And Real-Time Rendering A working library / by Mandy Brown Javascript : 8 ressources pour simplifier les I/O avec vos utilisateurs - javascript-ressources Aujourd'hui, la communication entre votre site et les utilisateurs est à l'honneur sur le Blog du Webdesign, tant en input qu'en output ! Découvrez cette sélection de ressources javascript simplifiant la gestion du clavier, des pointeurs, de la console, ou bien permettant d'afficher plus simplement les informations à l'écran ! TypeLink La navigation souris, un plaisir pour certain, un cauchemar pour d'autres. Mousetrap Cette ressource permet de créer très simplement des raccourcis claviers pour son application web ou son site web. Pointer Pour finir avec les outils d'input, voila Pointer, un outil permettant d'homogénéiser les différents types de dispositifs de pointage actuellement sur le web : Souris, Tactile, voir Multitouch. Colorjoe Colorjoe est un colorpicker tout beau et sans image, l'affichage est du pur-css ! EpicEditor Noty Rivets

Modern Web Development So, you’ve added a breakpoint, you refreshed the page, and now your script is paused. Now, the fun begins. The first thing of interest in the sidebar is “Watched Expressions”. If you care about the value of some expression (Say “MyApp.someController.property === ‘some value’”), then adding that as a watch expression will let you keep an eye on it without having to type it over and over in the console. Below that, the “Call Stack” section shows you every function call that the system went through to end up where it did. Next, “Scope Variables” lists the local variables and their variables. Now that you’ve inspected the state of the app on a breakpoint, you’ll probably want to move around. Continue resumes the execution of the program. These tools are essential in walking through your code and pin-pointing a bug, or finding out which path through your codebase is being followed. Another handy tool lives under the “XHR Breakpoints” section. Next in the list is the Timeline Panel. Timelines

New High-Quality Free Fonts Box model Summary In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine. In CSS, each of these rectangular boxes is described using the standard box model. This model describes the content of the space taken by an element. The content area is the area containing the real content of the element. If the CSS box-sizing property is set to default, the CSS properties width, min-width, max-width, height, min-height and max-height control the content size. The padding area extends to the border surrounding the padding. The space between the padding and the content edge can be controlled using the padding-top, padding-right, padding-bottom, padding-left and the shorthand padding CSS properties. The border area extends the padding area to the area containing the borders. Specification See also

Journey Through The JavaScript MVC Jungle Slicker Show and Hide Last time I showed you how to make something appear and disappear on a web page. This time I'll show you how to do it with style. Like we did last time, we'll start with our $(document).ready() and put everything else inside of it. Adjust the Speed This time, however, we're going to adjust the speed at which our item shows and hides. JavaScript: $('#slickbox').show('slow'); Note: If you use a speed word, put it inside quotation marks (either single or double); if you use a number, omit the quotation marks: $('#slickbox').show(500); Attach Effects to Events The final step here is to attach the effects to events. So let's take a look at how we would tie the "onclick" event of one link with an ID of "slick-show" to the "show" effect. // shows the slickbox DIV on clicking the link with an ID of "slick-show" $('#slick-show').click(function(){ $('#slickbox').show('slow'); return false; }); Notice that we attach ".click()" to "#slick-show". Demo 1 Try it out for yourself. Newbie Tip Other Effects Demo 2

15 web design responsive pour trouver l'inspiration - responsive-inspiration Aujourd'hui le Blog Du Webdesign vous présente un tour d'horizon dans le domaine des sites web responsive, avec une sélection de 15 exemples de qualité. Le responsive webdesign Nous avions déjà eu l'occasion de faire une sélection de sites autour du design responsive. Si jamais vous n'êtes pas au courant de la notion du responsive web design je vous laisse une nouvelle fois un petit rappel : La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur, tablette, mobile, télé connectée, ...) source : La pratique du webdesign responsive a déjà fait un petit bout de chemin dans notre façon de concevoir des sites. Si vous souhaitez aller plus loin consultez également nos articles sur le sujet du responsive : - Le livre "Responsive Webdesign" par Ethan Marcotte

8 Simple Ways to Improve Typography In Your Designs I wrote this arti­cle for Smash­ing Mag­a­zine and it was pub­lished last Fri­day on their site. I’m re-publishing it here for your read­ing plea­sure. Enjoy. Many peo­ple, design­ers included, think that typog­ra­phy con­sists of only select­ing a type­face, choos­ing a font size and whether it should be reg­u­lar or bold. These details give the designer total con­trol, allow­ing them to cre­ate beau­ti­ful and con­sis­tent typog­ra­phy in their designs. Measure The mea­sure is the length of a line of type. A sim­ple way to cal­cu­late the mea­sure is to use Robert Bringhurst’s method which mul­ti­ples the type size by 30. Leading Lead­ing is the space between the lines of type in a body of copy that plays a big role in read­abil­ity. Many fac­tors affect lead­ing: type­face, type size, weight, case, mea­sure, wordspac­ing, etc. This takes some finess­ing to get the right spac­ing but here is an exam­ple of what the code would look like: Hanging Quotes Vertical Rhythm Widows & Orphans Scale