background preloader

Mind Your En And Em Dashes: Typographic Etiquette - Smashing Magazine

Mind Your En And Em Dashes: Typographic Etiquette - Smashing Magazine
Advertisement An understanding of typographic etiquette separates the master designers from the novices. A well-trained designer can tell within moments of viewing a design whether its creator knows how to work with typography. Typographic details aren’t just inside jokes among designers. They have been built up from thousands of years of written language, and applying them holds in place long-established principles that enable typography to communicate with efficiency and beauty. Handling these typographic details on the Web brings new challenges and restrictions that need to be considered. Setting Body Copy Good typography comes down to communicating information, and the basis of information is good old-fashioned body copy – simple blocks of text. Indentation or Space After a Paragraph? When signalling the end of a paragraph and the beginning of another, you can generally either indent or insert a space between the paragraphs. But there is no hyphenation control in CSS. The Hyphen (al)

Fancy Scrolling Sites In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history. By "fancy things" I mean something happens when scrolling down besides the site scrolling down. So how do they do that? JavaScript. Know any others? Add them in the comments. Share On Why Subtle Typographic Choices Make All The Difference Advertisement A strong understanding of how designers control meaning is essential for anyone interested in graphic design or typography. In a previous article, we discussed how sophisticated and complex visual and verbal language can get, examining instances that show how type can be used to effectively take control of meaning. In this article, we’ll look at the reasons why subtle typographic changes can create considerable effect. We’ll refer to one or two linguistic and semiotic examples, as well as design case studies, to get to grips with why subtle changes can make all the difference. Let’s consider a couple of simple sentences: “The boy walks a dog” and “The boy walks the dog.” Two visualizations of the same word but with typographic treatments that have entirely different emphases and meaning. However, meaning comes not simply from comparing one visual interpretation to another. The name style of an iconic fashion brand. The online masthead of one of the UK’s premier newspapers.

@font-face Solutions & Suggestions In the last post I talked about the design aspect of using CSS3 @font-face, today I would like to extend this topic to the technical side on implementing custom web fonts. So what are the options for implementing web fonts? I'm going to review the three main methods of incorporating @font-face and explain the pros and cons of each method. 1) CSS3 @font-face Standard @font-face First, let's talk about the native way of implementing custom web fonts — @font-face. Bulletproof @font-face Syntax Because every browser supports different font formats (IE supports EOT only, Firefox supports EOT & TTF, and Safari supports OTF, TTF, and SVG), additional font formats are required to be cross-browse. @font-Face Generator If you need to export the fonts in different formats, there is a generator which allows you to generate various font formats from an existing font. Premium @font-Faces Pros & Cons PROS: Full control because the fonts are hosted on your server. 2) Font Service Providers Installing Typekit

10 HTML Entity Crimes You Really Shouldn’t Commit It has been over a couple of years since I posted my HTML tag and usability crimes posts, both of which are amongst the most popular articles here on Line25. There’s something about this title people just can’t resist! Let’s take a look at ten crimes you may be committing in your HTML content. Crime 1: Not converting your ampersands One of the most common HTML validation errors I see when checking the code behind Sites of the Week features are unconverted ampersand characters. Crime 2: Making your own ellipsis Did you know those three dots used to indicate a pause in a sentence are called an ‘ellipsis’? Crime 3: Incorrect use of the em dash I’m definitely guilty of this one myself. Crime 4: Incorrect use of the en dash Similar to the Em dash crime, the En dash is another form of dash often misused in our body copy. Crime 5: DIY Copyright symbol I’m sure we’re all familiar with the international copyright symbol—the letter C with a circle around it ©. Crime 6: DIY Trademark symbols

Web Typography: Educational Resources, Tools and Techniques Web typography has evolved a lot over the last years. Today we see rich, accessible typography, a plethora of type design choices for the web and a number of remarkable, type-based web designs. It’s a great time for web design, and it’s a great time for web typography. In this post we present an extensive overview of educational resources, tools, articles, techniques and showcases all related to web typography. We believe that such round-ups are valuable because they present many useful pointers in one place. Educational Typography Resources Link So You Want to Create a Font1 Alec Julien’s introductory piece on how you can create some beautiful fonts with a little hard work, a lot of knowledge and a little inspiration. Kerning Type and Great Typography4 There are lots of tips on the best way to perfectly kern a piece of type. Font Hinting8 Hinting, or screen optimising, is the process by which TrueType or PostScript fonts are adjusted for maximum readability on computer monitors.

The Basics of Typography Typography is a central component of design. It gives us an understanding of the heritage behind our craft. It’s one of the primary ways we, as a society, pass on information to others. What Is Typography? From a descriptive and simplistic point-of-view, typography is the arrangement of type. For me, how typography is used in a design is deeply rooted in its overall theme, tone and message. Your choice of typefaces and your technique of setting type give your composition its character, pace and style. A simple illustration of how influential typography can be is to look at the same text with different typefaces. It’s this level of integration with a design theme that makes typography one of the most powerful tools in the designer’s toolbox. Next, let’s go through a few basic typography terms and concepts. Lines A line of characters has at least five lines that it can be aligned to. Here are the five lines: Baseline: The one you might be most familiar with is the baseline. Leading Tracking

Javascript in Modern Web Design In today's web design, Javascript is a must-have component. Aside from its functionality, Javascript can enhance user experience by creating transitional effects such as fading and sliding animation. Thanks to the open source Javascript frameworks, we don't need to write custom Javascript from scratch anymore. Here are 47 Javascript plugins that you can use to enhance the user experience and functionality of your website. Don't forget to check out the sample sites, which show how the plugins can be used. The Two Popular Javascript Frameworks Right now, the two commonly used Javascript frameworks are: jQuery and MooTools. Loading ... Image Zoom and Popup Lightbox You're probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. jQuery lightBox Plugin This is exactly the same as Lightbox JS, but written on top of jQuery library. Thickbox Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. Highslide JS Tabs

Une police de caractères dédiée aux dyslexiques Saviez-vous qu’en moyenne la dyslexie touche 10% de la population ? Si ce handicap ne touche que 5% de la population en France (7% pour les enfants scolarisés), il est responsable de problèmes d’assimilation des textes et de retard dans l’apprentissage. Sans trop rentrer dans les détails, les personnes atteintes de dyslexie ont tendance à inverser les lettres (comme illustré plus bas) et donc à changer la signification des mots. Souffrant moi-même de légère dyslexie depuis mon enfance (je ne crois pas que ça se soigne d’ailleurs), je suis particulièrement sensible à ce sujet. Pour pallier à ce problème d’inversion, un graphiste néerlandais souffrant de dyslexie, Christian Boer, a conçu une police de caractères permettant de mieux identifier les lettres : Une police d’écriture pour les dyslexiques. Le principe est donc d’augmenter l’épaisseur des lettres à leur base pour leur donner plus de “poids” et éviter que le cerveau ne les retourne.

10 New High-Quality Free Fonts We know that every designer needs new fonts once in a while to have some backup elements to count on, and that is why we are here for, to help you searching for resources to use on your projects. So knowing that every one is looking around for high quality fonts to spice up their designs we decided to do this new roundup with a collection of some new and fresh fonts to give your projects a whole new look. Enjoy!! Sheep Sans Mangosteen BUUG Typeface Legion Slab Typeface Facebook Letter Faces Dunn Typeface Dash Typeface About the Author Hi, I'm Prakash Ghodke, a 19 year old from India working as freelance Web Designer. Related Posts 931 shares 10 Best New Free Fonts We’ve been on the prowl for some new free fonts to share with you. Read More 1138 shares 9 Free & Useful Fonts for your Designs Whether it’s PSD’s or icons, we love finding high quality free files and sharing them with our readers.

The Science of Looking Good in the Inbox CSSHow do I add margins to my image so text will wrap around it? Outlook 2007 and 2010 do not support the margin or padding CSS properties when placed within an image. Try using hspace and/or vspace:<img src=“ align=“left” vspace=“10” hspace=“10” /> Or add the additional spacing to the image itself (in pixels). CSSHow do I make a long text string wrap to the next line? If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style: This is a Microsoft only property so it should not adversely effect other clients. CSSI see a 1px white border around my table cells. If you are using a background color in your table cell, you might see a 1px white border around the contents of the TD. Or you can add it inline:<td style=“border-collapse: collapse;”>... Check out this post from Campaign Monitor for more info. If you are trying to “right” or “left” align multiple nested tables, the fix is a little more involved.

CSS3 @font-face Design Guide Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn't, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr. Common Mistake One common mistake that most people make when implementing custom fonts is not specifying the fallback fonts or picking the wrong fallback fonts. Web Safe Fallback Fonts When using custom fonts, it is important to include the web safe fonts as fallback. Layout Issues Because every font face has its own width, height, weight, kerning (letter-spacing), etc., some fonts are not substitutable with the web safe fonts. This might causes layout issues as shown in the image below where the fallback font extends off the boundary. Modernizr Fallback Font Styles With Modernizr (demo) Including Modernizr

Bootstrap, from Twitter Need reasons to love Bootstrap? Look no further. By nerds, for nerds. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Made for everyone. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!) 50 Totally Free Lessons in Graphic Design Theory 1,200+ courses and ebooks Design, code, video editing, business, and much more. Adobe Photoshop, Illustrator and InDesignGraphic, Logo and Print DesignSketch, Adobe XD & FigmaWordPressJavascript, PHP & PythonAdobe After Effects & Premiere ProMuch More Millions of creative assets Design templates, stock videos, photos & audio, and much more. Graphic TemplatesStock PhotosMusic TracksVideo TemplatesWeb TemplatesDesign AssetsWordpress Themes & PluginsMuch More 1,200+ courses and ebooks Design, code, video editing, business, and much more. Adobe Photoshop, Illustrator and InDesignGraphic, Logo and Print DesignSketch, Adobe XD & FigmaWordPressJavascript, PHP & PythonAdobe After Effects & Premiere ProMuch More Millions of creative assets Design templates, stock videos, photos & audio, and much more. Graphic TemplatesStock PhotosMusic TracksVideo TemplatesWeb TemplatesDesign AssetsWordpress Themes & PluginsMuch More

How to Develop Task Management Skills as a Freelancer The life of a freelance web designer varies in many ways to that of a corporate entity. Software firms and design studios are able to work together on big budget projects to earn a lot more than the average freelancer would. This often means when going solo you’ll work with a larger number of clients and have to divide your time up into unfair portions. For anybody in the industry it’s absolutely essential to understand task management. Timing, repetition, sleep, nutrition, and a lot of other factors play a role in your work attitude. Take on Reasonable Hours When you have the time to spare, ambition can often get the best of your judgement. This system of workflow will slowly degrade your inspiration. Unfortunately the Internet is a crowded ecosystem and there are a lot of great freelancers out there. In Daily Routine, Practice makes Perfect If you have a feeling that your work schedule is uncomfortable or stressful you are most likely correct. Honesty is the Best Policy Conclusion

Related: