Font Technologies Font Friday

Parametric fonts: Diagram of capital "A"
This article, from SmashingMagazine.com, explicates the concept of parametric fonts. The concept has been around for 40+ years but it has novel applications in web type design.

How Font Technologies Will Improve the Web

PARAMETRIC FONTS (original article)

Words are the primary component of content for the web. However, until a short while ago, all we had at our disposal were but a few system fonts. Adding to that, those system typefaces weren’t necessarily coherent from operating system to operating system (OS). Fortunately, Windows, macOS and Linux made up font-wise, and since then, all modern fonts have been compatible across those OS’. There’s no question, the future of web typography looks promising. Continue reading “Font Technologies Font Friday”

14,000+ color names! Just type in a hex code

Smashing Magazine‘s Smashing Newsletter Issue #190 has this gem: more than 14,000 color names, accessible by entering a 6-digit hex code. Some examples below. Click on “quick! Find one of 14’000 color names!” to get the HTML, CSS, and JS code (see below).

What comes to your mind when you hear terms like “Bright Nori”, “Paw Print” or “Waffle Cone”? If you’re thinking of colors, well, good guess! Actually, these are only three of the 14,874 unique color names in the massive color dictionary that David Aerne brought to life. 

Color Names

The aim of the project is to create as large a list as possible of unique color names. And, well with almost 15,000 color names featured, the undertaking definitely was successful. The names are merged from various sources and handpicked from thousands of user submissions. You can enter a hex value to find the name for it, indulge in the entire list, or, if you’re feeling creative, submit your own color name. Color inspiration at its finest.

CodePen: 14,000+ color names. Funky Frog #90bd35 Plus HTML, CSS, and JS code

CodePen: 14,000+ color names. Brilliant Azure #4499ff

CodePen: 14,000+ color names. Cheese Please #ff9911

CodePen: 14,000+ color names. Lt Salmon Pink #ff9999

CodePen: 14,000+ color names. Nataneyu Gold #a37e1c

CodePen: 14,000+ color names. Sizzling Red #fe2e52

CodePen: 14,000+ color names. Vida Loca #449911

Environments for Humans online Responsive Web Design Summit 2013 – Day 3 of 3

Responsive Web Design Summit - Day 3

Responsive Web Design Summit - Day 3I’m attending the Environments for Humans online Responsive Web Design Summit 2013 – Day 3 of 3. I’m summarizing the talks rather than going into detail to avoid infringing on the presenters’ copyrights.

Today’s presentations focus on code. Extremely informative!

Fractal CSS: There Is No Breakpoint, by Ben Callahan

  • Major Approaches
    • Single CSS File
    • Multiple CSS Files (global.css, local.css)
    • Breakpoint Based Partials (base.css, no-mq.css)
    • Module Based Partials (mq.css, no-mq.css or mq.scss, no-mq.scss)
  • Major breakpoints with minor “tweakpoints” inbetween

Responsive Web Design with SASS+Compass, by Sam Richards

  • “The Web is an Inherently Unstable Medium” — Ethan Marcotte
  • Media Queries
    • “Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!” — Stephen Hay
  • Fluid Grids using Singularity
    • Symmetric Grids
    • Asymmetric Grids
    • Semantic Grids (HTML, SASS)
    • Responsive Grid Context (SASS)
    • Nested Grid
  • Fluid Media using Toolkit
    • Basic Fluid Media
    • Intrinsic Ratios (SASS, CSS)

Responsive Layouts beyond the Sidebar, by Jen Simmons

  • Previous workflow
    • PSDs as final handoff to client without developer involvement
    • 960 grid – 1 or 2 sidebars – fixed/fluid/responsive
  • Design content structure
    • Blocks vs. chunks
  • Design source order
    • Turn off design styles to make sure your hierarchy is correct and site is accessible
  • Design narrowest layout, then wider and wider layouts
  • Recommendations
    • Learn HTML, CSS, layout CSS
    • Let a framework do the heavy lifting

Navigation in Responsive Web Design by Erick Arbé

  • RWD can be difficult
    • Explaining RWD to clients; the lack of a static design phase; navigation; images; tables; converting old fixed-width sites; what to serve users of old versions of IE; testing time and cost
  • Content strategy
    • Retro-fitting an existing website to become responsive can be difficult, especially one with a large menu
    • Smaller sitemap = easier to build responsive nav
  • Building your responsive navigation
    • Hover vs. Touch; top level menu items; two sets of navigation?; a simple JS function; some easy CSS to implement; position: fixed; mobile first!; using your mobile nav as your desktop nav
  • Navigation patterns and examples
    • Avoid position: fixed; build mobile first; can use mobile nav patterns on desktop
    • Add padding; grid/percentage based; multi-toggle/accordion; footer nav; select nav; off-canvas/page slide; no sub-nav

Rebuilding a university homepage to be “responsive”. Twice. In less than a year. by Erik Runyon

  • Why RWD Matters
  • Our Path to Responsive
  • 2011 Redesign
  • 2012 Redesign
    • 1. Global
      2. Screen
      3. @media queries as needed
      4. Hi-res/retina specific
      5. Print (yes, print)
    • Hiding content is NOT a mobile strategy
  • Responsible Responsive
    • Modem speeds moving to broadband speeds
    • But outside of 3G and Edge areas, speeds are still very slow
    • Web page sizes are getting bigger
    • Conclusion: RWD is not mobile friendly e.g. because all images are downloaded, even ones that aren’t used with mobile
    • But the web is, and RWD CAN be

Five Simple and Practical CSS List Styles You Can Copy and Paste

HelvetiList image

HelvetiList imageFrom Joshua Johnson at Design Shack, a short tutorial showing the CSS to make several lists with a bit of interest:

We start off with a fun animated vertical list, then style up a list with thumbnails and text, another with just images, [a horizontal menu] and finally an ordered list where the numbers are styled differently than the rest of the type. There’s a ton of great things to learn here so let’s jump in!

HelvetiList

For our first list, we’re going to start with a simple, minimal but super attractive design that’s heavily dependent on the beauty of the typography. We’ll make use of some thin Helvetica styles and toss in a smooth animation on hover.

Demo: Check out the demo and code on CodePen.

HTML

Our markup here is dead simple. Create a div (you’ll probably want a class or ID in a live project), then toss in a header and an unordered list with five list items.

CSS

As we saw in the screenshot above, the list items use very thin type, subtle separators and a hover state that enlarges the font. To start, give the div a width and set your generic h2 styles.

Next, apply a list-style-type of none to ditch the bullets and reset any margins or padding that may be present. For the actual list items, I applied a slight bottom border, which provides that little divider. I did use the last-child selector, but it’s really no big deal if there’s a browser that doesn’t recognize that and decides to throw an extra border on the bottom.

Also notice that both of the times I set the font, I used CSS shorthand and applied different weights. To finish off, I applied some link styles and set the transition to enlarge the font and change the background color on hover.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
div {
  width: 200px;
}
h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
li:last-child {
  border: none;
}
li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
li a:hover {
  font-size: 30px;
  background: #f6f6f6;
}

 

Full article including four more kinds of lists:

List with thumbnail images Thumbnail image list

 

Images in a grid Standard thumbnail grid list

 

Horizontal menu Horizontal menu list

 

Ordered list with big numbers Big numbers ordered list