eesur

When two become one — the ligature

It’s natural to have an epiphany noticing the ‘little secret that only a select few knew of — something hidden under the surface or so many bodies of text, but only found by those seeking out the detail. A little bit of cherished elegance is the ligature.’

David Schwen visual of how ligatures are created

When used correctly ‘two letters are joined together to go from heinous to beautiful’. Other than some famous enduring applications of ligatures such as CNN logo they are often missed/overlooked in normal reading.

‘Simple, straight, & clean’ CNN logo, virtually unchanged for 30+years (designed in 1980, by the now deceased Anthony Guy Bost, on a shoestring budget)

I love the function of ligatures and in a strange way admire their modest, understated unification. That said it’s awesome we have fonts with so many glyphs dedicated to them, such as the splendid typeface Mrs Eaves Just Ligatures or the extensive glyphs in Esta Pro.

This post was intended to be about the most famously overlooked ligature, the ampersand — but hey, ligatures are all so alluring! To conclude, here’s a tumbler dedicated to ligatures

Responsive sites and fluent grids

From mobile browsers to netbooks and tablets, we are visiting sites from an increasing array of devices and browsers. Fluid grids, flexible images, and media queries can help deliver a consistent experience across screens.

Personally found designing responsive sites only to be productive when the content and structure supports it. Sometimes a separate mobile version just works better. Was a big fan of lessframework and looking forward to doing some experiments with Joni Korpi’s more recent framelessgrid. It’s not a framework and appears much simpler and more flexible to use in projects. I also like that it’s fixed-width rather than fluid.

Golden Grid System is another option with fluid-width CSS grid system for responsive web design.

The zoomable baseline grid is a super feature! It can be a pain ‘to change the font-size at certain screen widths, for example to make the text easier to read on huge monitors, or to make the text fit better onto narrow mobile screens. This can make the proportions of your layout feel off, especially if you’re using a baseline grid.’ Also with the elastic gutters, they stay in proportion to the content, rather than pulled and squeezed.

Kerning, the appreciation of empty space

Kerning makes all the difference in good logo or branding design. The delicate understating of spacing around/inside/between letters and with the overall flow of space allows the designer to be sensitive and create gravity or tone. When a word is isolated, it needs some extra care.

I’m a big fan of typographic logos and don’t believe in having a icon for the sake of it (it should have purpose). Hence often spent great care with this kerning, and always admire when it’s excuted well. To the spectator it will vary depending on their sensitivity. Like a professorial musician hears every pluck of his instrument and it’s subtle variances but to someone dull it’s just a pluck of an string, and everyone else somewhere in-between.

A great game online if anyone interested playing with abit of kerning check out this great online game type.method.ac

Choosing typeface for baby branding

Am working on some branding for a friend who photographs babies, thought I’d share some research on typeface choices. Her current logo was typographic but felt authoritative due to its strong square serifs and was just too harsh and cold for the audience. Though the babies won’t care about the typographic style—it still needs to communicate to adults in regards to their babies. Need something closer to her warm approach and lovely delicate photos.

Feel the typeface should somewhat eschew that pre-language of babies—they are full of life but fresh and open to the new unknown world they enter.

Have started by exploring typefaces with large x-heights; those that reflect softness and appear simple in construction. Perhaps having slight modulation in strokes, and apertures that feel expansive (opposed to the smaller entries produced by longer sharp edged serifs). Above are some current typefaces that I’m liking, which are working beautifully (colour choices will be those that adults associate with babies rather than those simple pure colours babies engage with).

I’m loving the slight contrast and the rounded yet canted terminals in Cronos (feel this resonates with the subtle bespoke touch in Lelde’s photography).

Custom SVG error pages (for download)

To change default error pages, simply create your own html files — upload them to your server, and add the following to your .htaccess file: (source)

 
ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html

You are welcome to use the ones I’ve created (links & image previews below). I’ve used SVG as background images as I wanted them to be scalable — you can replace with any image type you want. Note: that SVG is only supported by recent browsers.

Download zip — contains 5 html files and 5 svg files (all the code is simple and validates)

Check out the example page links: (re-size browser to see how sharp the svg re-sizes)

If using SVG (as in my example) you will need to make sure the remote server sends the appropriate MIME type so these lines may need to be added to .htaccess file: (source)

   
AddType image/svg+xml svg
AddType image/svg+xml svgz 

Maintenance mode for wordpress (without plugin)

Sometimes you need to do some private alterations to your wordpress site and rather than installing a plugin or locking things down you can paste the below code snippet into your functions.php file. The site will now only show to admins. (Remove it when you are done)

function cwc_maintenance_mode() {
    if ( !current_user_can( 'edit_themes' ) || !is_user_logged_in() ) {
        wp_die('Maintenance, please come back soon.');
    }
}
add_action('get_header', 'cwc_maintenance_mode');

Thanks to Jean-Baptiste for this and other useful WordPress hacks

Multiple backgrounds with CSS3

No need for non-semantic nested elements and unlike CSS2.1 you can have the images as layers. So the first is the closet to the user (top) and the others beneath.

the syntax is straightforward (simply using a comma with the standard background property) —here’s the code for the above example:

#multiple-backgrounds {
background: url(num1.png) top left no-repeat,
url(num2.png) top left no-repeat,
url(num3.png) top left no-repeat;
}

Browser support is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing multiple backgrounds

CSS3 type and mask images

Quick play with using mask-image for type. Though not supported by some browsers, it degrades gracefully and anything that can help using actual text over images is a big plus.

Using something like letteringjs.com would make any letter tweaking much eaiser — anyhow above quote was from Walt Whitman and here’s the original code from Trent Walton’s article:

.mask-box h3, .mask-box p{
-webkit-mask-image: url(/path/to/mask.png);
-o-mask-image: url(/path/to/mask.png);
-moz-mask-image: url(/path/to/mask.png);
mask-image: url(/path/to/mask.png);
text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);}

Links to some great design sites

yellow for typography sites, red for design resource sites and blue for some ridiculously talented guys and gals!

Glance at Duchamp

I have forced myself to contradict myself in order to avoid conforming to my own taste. —Marcel Duchamp

Admire Marcel Duchamp’s musical experimental compositions and influence in breaking out of limited translations and expressions—his freedom and subtleness of presentation and fullness that ensumes in him and his work entices me. “Many artists have left their mark on the development of contemporary art, but Duchamp cleared and paved new paths that, without him, would have been impassable; even now many of those avenues are only beginning to be explored.”

“Fountain is the most famous of Duchamp’s so-called ready-made sculptures ordinary manufactured objects designated by the artist as works of art. It epitomises the assault on convention and accepted notions of art for which Duchamp became known.” source

The individual, man as a man, man as a brain, if you like, interests me more than what he makes, because I’ve noticed that most artists only repeat themselves. —Marcel Duchamp

Suprematism

Suprematism is a really cool art movement formed in Russia in 1913 by Kasimir Maleveich, which focused on the the fundamental geometric forms of squares and circles. “He claimed to have reached the summit of abstract art by denying objective representation.”


Black Circle & Black Square [both 1913] State Russian Museum, St. Petersburg. More compositions