Posts Tagged:arial

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

Delivering WordPress in 7KB

Over the past six months, I’ve become increasingly interested in the topic of web sustainability. The carbon footprint of the Internet was not something I used to give much thought to, which is surprising considering my interest in environmental issues and the fact that my profession is web-based. The web in a warming world As a brief recap, I attended MozFest in London last year. In between sessions, I was scanning a noticeboard to see what was coming up, and I spotted a session entitled, “Building a Planet-Friendly Web.” I felt a little dumbstruck. What on Earth was this going to be about? I attended the session and the scales fell from my eyes. In what now seems obvious — but at the time was a revelation — I learned of the colossal energy demand of the Internet. This demand makes it the largest coal-fired machine on Earth, meaning that…

Read More →

Understanding Web Fonts and Getting the Most Out of Them

Thierry Blancpain is a brand and interaction designer at Informal Inquiry in New York City and co-founder of Grilli Type, a Swiss type foundry. While this article is generally applicable to all web fonts, Grilli Type fonts are used throughout as examples of the concepts, particularly those demonstrating OpenType features. Using your own fonts instead of system fonts is getting easier, but it’s still an evolving field. We’ll go over the different types of font formats and cover tips and best practices for them in this post. We’ll also dive into more in-depth features for those of you who want to level up and aim to perfect the craft with advanced concepts and considerations when using web fonts. In the end, you’ll hopefully feel equipped not only to put web fonts to use but to get the most out of them. Here we go! Font Formats When you purchase web…

Read More →

Shipping system fonts to

System font stacks got hot about a year ago, no doubt influenced by Mark Otto’s work putting them live on GitHub. The why, to me, feels like (1) yay performance and (2) the site looks like the rest of the operating system. But to Mark: Helvetica was created in 1957 when the personal computer was a pipe dream. Arial was created in 1982 and is available on 95% of computers across the web. Millions, if not billions, of web pages currently use this severely dated font stack to serve much younger content to much younger browsers and devices. As display quality improves, so too must our use of those displays. System fonts like Apple’s San Francisco and Microsoft’s Segoe aim to do just that, taking advantage of retina screens, dynamic kerning, additional font-weights, and improved readability. If operating systems can take advantage of these changes, so too can our CSS.…

Read More →

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this: html { font-family: Lato, “Lucida Grande”, Tahoma, Sans-Serif; } What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, what that rule is saying is: I’d like to use the Lato font here, please. If you don’t have that, try “Lucida Grande” next. If you don’t have that, try Tahoma. All else fails, use whatever you’ve got for the generic keyword Sans-Serif So in what situation would a browser not have the font you’re asking for? That’s pretty common. There are only a handful of fonts that are considered “web…

Read More →

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable. The result we want to reproduce. In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This polyfill is great for getting started to play with conic-gradient(), as it allows us to use them to build stuff that works across the board. Sadly, it doesn’t work with CSS variables and CSS variables have become a key component of writing efficient code these days. The good news is that things have moved a bit over the past two years and a half. Chrome and, in general, browsers using Blink…

Read More →

Improving your visual design skills: Thoughts for beginners

Last summer, I set out to improve the visual polish of my client deliverables. Other UX team members’ work looked like it could have been from members of the visual design team, and it was time to up my game. I felt lost, however, in plotting concrete steps to accomplish this goal. While I knew what I need to do — build an understanding of typography and color, and strengthen existing skills around layout and visual hierarchy — I didn’t know what resources to trust, tools to use, or ways to practice. Fast forward a year, and my visual skills — while still budding — have grown. If you’d like to create more visually effective deliverables and improve your basic visual design skills, below are resources and tools to get you started, and some lessons that will help you succeed along the way. Books & Articles Here are a few…

Read More →

Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js

A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn’t too difficult. Let’s get started! Server side rendering You might have heard people talking about server side rendering as of late. We looked at one method to do that with React recently. One particularly compelling aspect is the performance benefits. When we render our HTML, CSS, and JavaScript on the server, we often have less JavaScript to parse both initially and on subsequent updates. This article does really well going into more depth on the subject. My favorite takeaway is: By rendering on the server, you can cache the final shape of your data. Instead of grabbing JSON or other information from the server, parsing it,…

Read More →

Align SVG Icons to Text and Say Goodbye to Font Icons

Elliot Dahl: At Pivotal we’ve created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use. Alignment and icons (of any sort) will probably always be a bit tricky. It depends on two things that will be different on every site: the font and the icons. Elliot was able to get perfect alignment with Arial by pulling the icons down with bottom: -0.125em; because Arial sites right along the baseline and the icons themselves were designed with a 12.5% ring of white space around the edges. It’s a fairly common practice to design SVG icons with space along the edges (as annoying as it might be for alignment) because without the space, you might get awkward clipping on the edges with certain browsers/resolutions/zooming/etc (sorry I…

Read More →

We Don’t Serve Your Type Here: A History of Fonts on the Web – Part 1

Back in 1994, websites looked a lot different. Those of you who spent time on the web during that year probably have a good idea of what I’m talking about. If you didn’t spend time on the web that year, or if you weren’t even born yet, allow me to paint you a brief picture:

Back to Top