@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
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
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