Monthly Archives: September 2018

10 Typography Tools, Templates and Libraries Web Designers Need to Know

Typography is indeed one of the most crucial components of every good web design. As a novice or professional web designer, knowing about the best typography tools, frameworks and libraries is definitely a plus point.

All these resources can aid you in dealing with web design typography in a better manner, offering you extensive control over fonts used on the web. Enjoy!

1. FlowType

As a handy plugin, FlowType will dynamically adjust the font size in accordance to the width of the wrapper under focus. Additionally, you can use the plugin for applying an ideal count of characters per line along with screen of variable width specification. FlowType can be easily downloaded from GitHub and plays a vital role in accomplishing the most legible typography which includes 45 and 75 characters on a per line basis.

2. Typeplate

As a complete framework for setting up typography in a web design, Typeplate is shipped with some stunning basic typographic styles that address critical elements within web design such as colors, scaling, dropcap, small capital, hyphenation, code block, blockquote, scaling and a lot of other interesting stuff.

3. Gridlover

As a brilliant typography tool, Gridlover allows you to establish a typographic system wherein there is a fully adjustable CSS for the line heights, font sizes and all margins. As an easy-to-use tool, Gridlover allows you to achieve perfect typography for your web design.

4. Hatchshow

Hatchshow is a special web typography plugin which expands the size of your font, thereby filling in the entire width of the font container. Utilizing a specific algorithms, Hatchshow will measure your container’s width, length of font characters and finally append the appropriate font size.

5. LiningJS

As an excellent JavaScript library, LiningJS allows you to individually style each line within a specific paragraph. Stimulating the idea of “::nth-Line()”, “::nth last-line()” and “::last-line” pdeudo-classes, LiningJS will serve as your most trusted library for creating a brilliant web typography.

6. Underline.JS

A yet another remarkable JavaScript library, Underline.JS will allow you to improvise the text underline. You can compare the demo with the underline output of your current CSS text-decoration for spotting the key differences.

7. Modular Scale

Modular Scale is a handy typography tool that will generate an ideal font along with proper scaling for the body and heading of your text. Output received with the use of Modular Scale is available in Sass and should hence be used in conjunction with Sass library.

8. Kerning.js

Kerning.js is a JavaScript library that marks the meeting of kerning with CSS. You can use it to automatically style, kern, scale and transform your web typography using real CSS rules.

9. FFFFallback

FFFFallback is a brilliant web typography tool that allows you to find stack of font that would further degrade in a graceful manner. Available in the form of a bookmarklet, FFFFallback will analyze will allow you to analyze the family font on a particular page, followed by suggesting you the most appropriate font.

10. TypeSettings

As a remarkable pack of CSS rules, TypeSettings is available in Sass and Stylus. You can use it for defining vertical rhythm, font scaling and reasonable ratio for your web typography.

Spot Tips and Work with Good Graphic Engineers

It is an unfortunate truth that in our society, engineers are underrated. Compared to the scientists, architects, and politicians they work with, the engineers remain relatively unknown and are just those behind-the-scenes ‘elves’ who hold the ship together.

Are engineers disrespected, under-appreciated, overworked? Is their role in society valued and rewarded? This debate is ancient, and it comes back into the light whenever something big goes terribly wrong. NASA scientists landed men on the moon, NASA engineers mixed up feet and meters resulting in the loss of an expensive satellite. You see my point.

What is A Graphic Engineer?

The design profession has it’s engineers too, and they are just as underrated as their sciencey counterparts. Their arena isn’t space tech or tall buildings, but rather packaging die lines and website code. I’m not talking solely about the production people, proofreaders, mechanical artists, programmers, etc., but rather those individuals who dedicate themselves to becoming Graphic Engineers. The Graphic Engineer (GE) is not identified by his job title or his skill with software, but rathey by his mindset, his personality, and his work habits. He is someone who views the world differently and approaches every problem from a slightly steeper angle of incident.

The GE is a valuable member of any successful design team, and a good engineer can make everyone’s job easier, but they’re not always easy to manage or to work with. Here’s how you might identify, and then accomodate your GE, to get the most out of him, and your team overall.

How to spot a Graphic Engineer

Is obsessed with Details.

Not just the obligatory ‘detail-oriented’ that every job description in the world includes, these people go above and beyond what most folks would consider ‘a closer look’. Spotting a misused Em Dash from 30 meters is just the beginning. Editor: One of the 15 signs you’re a bad graphic designer.

Values the methodology, sometimes over the results or the time frame.

Embodying the philosophy that “anything worth doing is worth doing right,” the GE will go out of his way to ensure that any process is done to the letter, including documentation and feedback, which often go overlooked. He’s the one most likely to create immaculate CSS style sheets, even if it’s just for an internal login page. Table styles in InDesign, layer comps in Photoshop? Most likely put together by a GE. Best practices, after all.

Never accepts good enough.

Along with his obsessive nature, the GE has an overdeveloped sense of duty, and never leaves a job unfinished. For that matter, he re-defines the word ‘finished’, and will take those extra precautions to ensure quality. After all, it’s his butt on the line when something goes wrong. Just like NASA.

Lives in a world that always needs fixing.

Rather than simply striving to make the world more enjoyable or more beautiful, the GE strives to solve problems, correct errors, and iron out all manner of wrinkles in the day-to-day of our profession. It’s a very blue collar approach to graphics but show me where the leak is.

How to get the most from your Graphic Engineer

Now that you’ve identified your groups GE (raise your hand if it’s you! – Editor: You got me spot on!) , you have to understand a few things about how he works. Because GEs are unlike regular employees, a bit of tact is required to get the most out of your engineer.

Give him space.

This is both physical and metaphorical. Clearly, all GEs work better with a larger desk, larger monitor, more sunlight and square footage, and an ergonomic chair, but at the same time, I’ve never met a GE who worked better with bosses hovering and peering over his shoulder. In fact, that’s probably the easiest way to get shoddy work when you need it most. (Editor: Amen)

Ask his opinion.

Personalities aside, GEs always have opinions. And those opinions are often based on independent research, industry knowledge, trial-and-error, prior experience, and good old fashioned gut instincts. In other words, those opinions are valuable and ignoring them simply isn’t smart. GEs want to improve their general situation (they live to fix leaks, remember?), so their advice is usually constructive. Also, ignoring those opinions can lead to bitterness, depleted productivity, and the wording of those same precious opinions and ideas.

Let him rant.

Since engineers are often under tremendous pressure, they may need to let off some steam. (pardon the metaphors) So let them. Do whatever you can to get the most out of your GEs, even if that means shaking things up in your studio. Ranting often brings to light feelings and thoughts shared by many members of the team but why not let your hardest thinker explain why the current situation has gone pear-shaped.

Learn from him.

The engineer is naturally a teacher. By providing knowledge, he helps elevate everyone around him and thus feels less aliented. Also, this makes his job easier because the rest of the crew is meeting him half way (or at least part way). Considering GEs are often well versed on the latest trends, languages, software techniques, and professional happenings, you might actually learn something when he pulls out the “well, actually” during a meeting.

If you’ve never spared a thought for the Graphic Engineer, now’s the time. Next you need him to tidy up a messy style sheet, extend a poorly cropped photo, or a revive hand-me-down Mac, show a bit of appreciation and understanding. Graphic Engineers are the glue that hold together the gears of the creative industry. Imagine your life without them.

Related Pages With Top Design Blog

The pages have been categorised into five broad categories: Freebies, Tutorials, Inspiration, Web Design and Articles.

Freebies

  • 30 Essential PDF Documents Every Designer Should Download from Positive Space
  • Ultimate Web 2.0 Layer Styles from DezinerFolio
  • Free High Resolution Plain and Grunge Paper Textures from Fudge Graphics
  • Free Hi-Res Watercolor Photoshop Brushes from Bitt Box
  • 200+ Free Grunge Photoshop Brushes from You The Designer
  • Free Hand Drawn Doodle Icon Set for Bloggers from Spoon Graphics
  • Free Icons: Function Icons from WeFunction
  • 40 Beautiful Free Icon Sets from Six Revisions
  • 50 Most Beautiful Icon Sets Created in 2008 from Noupe
  • 63 Must have Grunge Fonts from OutlawDesign

Tutorials

  • Super Cool Frilly Bits Typography from Abduzeedo
  • Design with Swirls and Flourishes from MyInkBlog
  • 40+ Tutorials for Working with Wacom Tablets from Designm.ag
  • Advanced Glow Effects from PSDTuts
  • Colorful Glowing Text Effect in Photoshop from Tutorial9
  • That Wicked Worn Look ~ The Series from Authentic Boredom
  • Create a Dream Design with 3D Typography from GoMediaZine

Inspiration

  • 50+ Kick Ass Logos for Inspiration from Fuel Your Creativity
  • 92 Must See Creative Photographs from Just Creative Design
  • Another 79 amazing album covers from Inspiredology
  • Business Cards of Bloggers from Brian Yerkes

Web Design (+Inspiration)

  • 15 Excellent Examples of Web Typography. Part 1 from I Love Typography
  • 50+ Gorgeous Navigation Menus from Vandelay Design Blog
  • 83 Beautiful WordPress Themes You (Probably) Haven’t Seen from Smashing Magazine
  • 21 Mindblowing Premium-Like Free WordPress Themes from Smashing Apps
  • Unraveling the Secrets of WordPress’ Comments.php File from NetTuts
  • 7 Fresh and Simple Ways to Test Cross-Browser Compatibility from Freelance Folder

Articles

  • Why your web startup will fail from Ideas On Ideas
  • 101 Essential Freelancing Resources
  • Video Game Design Between 1990-2008 from Web Designer Depot
  • 12 Common Photoshop Mistakes, Misuses and Abuses from Design Cubicle
  • Top 50 graphic design blogs from David Airey
  • How to be a good client from SwissMiss
  • Obama logo ideas that weren’t chosen from Logo Design Love
  • 2008 Design Trends from Web Designer Wall
  • The Color Wheel and Color Theory from Creative Curio

What is your most linked to article? Please share with us in the comments below. To do so, type your web address into Yahoo! Site Explorer and look for the article with the most links (not your home page).

5 Good Fonts, Used By Professionals In Graphic Design

Top 7 Most Used Fonts Used By Professionals In Graphic Design

1. Helvetica

Without a doubt, Helvetica is the most heavily used font by professionals (and also by the not so professional) in graphic design. Although some praise the font, many believe that it is spaced too tightly.

And as Vivien pleas in her 16 most overused fonts article, “Understand that you can’t always rely on Helvetica to illustrate and deliver your every message. Helvetica is not perfect for everyone and every occasion.”

2. Trajan

Trajan finds its way into many Hollywood movie posters and anything remotely to do with religion, law, marriage, class or the past. You can check out the flickr pool for more uses of Trajan.

A bit of history on the font Trajan… Trajan is an old style serif typeface designed in 1989 by Carol Twombly for Adobe. The design is based on Roman square capitals, as used for the inscription at the base of Trajan’s Column from which the typeface takes its name.

3. Garamond

Although there are many versions of Garamond, the most used version today is the Adobe Garamondversion (as seen above) released in 1989. Garamond is a great font for magazines, textbooks, websites and long bodies of text and was recently named the second best font (after Helvetica) by a German publication.

4. Futura

Futura is a font that comes up often in large displays, logos, corporate typefaces and in books where small text is needed. It is based on geometric shapes (near-perfect circles, triangles and squares) which became representative of the Bauhaus design style of 19191933. Futura has an appearance of efficiency and forwardness. Some do hate the font though.

5. Bodoni

Bodoni is a great font for headlines, decorative text and logos. Bodoni has a narrow underlying structure with flat, unbracketed serifs. The face has extreme contrast between thick and thin strokes, and an overall geometric construction which makes it a very aesthetic looking font.