At the beginning of the project, I designed the website using Wix, a web development server. The advantage of doing this is that the UI gives a clean easy way to build a website without too many issues. The only issue is that the UI gets in the way of coding and true design. This is the issue I’ve had with the maps. The first one looks like this:
This map was exported through QGIS, a map building programme, using a third-party plugin that allows the map to be hosted in HTML. However, the code seems somewhat unstable because I can’t get the dots to expand into popups to give the viewer more information.
I’ve also tried with Mapbox:
I think this looks a lot better, because unlike the QGIS map which is completely designer-controlled, the underlay of the map is controlled by Mapbox in a more sustainable way. It just works. The issue that I am having is that I can’t get the HTML, CSS and Javascript to work in the way I want for a demonstration for the hand-in. I have a developer friend working on it for launch.
In the meantime I have decided to work on the rest of the website using Adobe XD. This will give an overview for my friend to work from and show the appearance of all the elements.
The map plugin available doesn’t really do working interactive maps, and this prevents be from building a full website on it, and giving a detailed demonstration anywhere, but it will give a greater gist.
I think a map with fun-pop outs and hovers and filterable features will be good:
Online Tool
Using XD has also given me the chance to work on the tool and how it can be shown online:
Anne-Maria Geals says that: “I feel the online tool for local people to design their own letters is a fantastic idea and would be a lot of fun for the contributors. I’d certainly like to have a try of it, but I’m not from Walthamstow! It’s a pity that this idea was explored late on in the project.”
Yay! It feels nice to get some good feedback, and a little like I should have done this before, but I’ve developed it now.
The online tool gives me an opportunity to include generative art in the project again. I had been a bit lost on how to include it before, but now I can take glyphs made by participants and combine them with data and then remix with participant help:
Glyphs are split up using data from TfL – the more passengers travelling into Walthamstow, the more squares in the grid. The glyphs get mixes up.Mixed up glyph!
Glyphs of the same letter can be drawn up and then distorted further:
Once a threshold for number of letters has been reached, participants can choose to remix letters and distort them. The colour of the letter is decided by the current outside temperature. This tool and function shows how data and community can be merged for satisfying results.
This can then be used as part of the launch with the public …
Anne-Marie Geals, a typeface designer, advised that “the typeface family (or variable font) will be lengthy to complete […], especially as you have expressed you want to include […]other scripts in addition to the variety of styles […] you will be in it for the long-haul!” She suggested that a short project description for the typeface would help enormously, and it follows below:
A new variable typeface inspired by the architecture of Walthamstow to embody the innovation powered by the community. Its aesthetics will be geometric to represent the community’s burgeoning awareness of typographic style. It will shift its appearance on weight, width and roundness axes and include the full set of glyphs in Latin and European scripts. It will be designed for eye-catching display type in both print and screen-based media and for free personal use by the community.
Further feedback from Anne-Marie Geals
I’ve been looking at your blog so I can get my head around your project as a whole, not just the typeface. I understand now that the typeface is supplementary, that you would like to continue with the typeface after your final MA hand-in and that my feedback may give you some direction to continue on with it after the MA is done. I was a bit concerned, as you would only have a few days left to finish a whole typeface! But, now I know it is just the start, you are in an ideal position and can get it how you want, at your leisure. I think the typeface family (or variable font) will be lengthy to complete (possibly more than you realise yet!), especially as you have expressed you want to include Devanagari and other Indic scripts in addition to the variety of styles. So I think you will be in it for the long-haul! TBH, I’ve only had an afternoon’s training in Devanagari, and that was enough for me to decide that if I should want to incorporate it, I’d prefer to collaborate with an expert in the script to get it right. Reading Uni is certainly the best place to find out about collaborations in language scripts. Bruno Maag once told me that type design is like a ‘divine calling’ rather than a job, and he is right, it commands 100% of your attention! It’s very easy to spend the whole MA on a typeface alone – trust me I know! So, I think it is a good decision to put the typeface on ice and focus on completing the other parts of your project. You certainly have thrown the net wide, and have clearly worked very hard! The workshops and walks must have taken a lot of organisation, and quite tough to analyse what you’ve got and what is useful or can be used. I found with my MA that I had researched so much, it was hard to cut through all the information and get to the heart of what I wanted to communicate. I feel the online tool for local people to design their own letters is a fantastic idea and would be a lot of fun for the contributors. I’d certainly like to have a try of it, but I’m not from Walthamstow! It’s a pity that this idea was explored late on in the project. If the online tool yields plenty of responses from your audience, potentially this could provide valuable visual clues from the local community which could also have an impact on the design direction of your typeface. Some of their responses might come ‘from the heart’, and not necessarily something visible, such as landmarks or visual themes of Walthamstow, but something felt. I found with my Welsh typeface that my response to sounds was equally important, if not more important than anything I’d seen. What clinched it for me was the relationship between the sounds of the spoken Welsh language and the landscape. It’s very helpful to do mark-making exercises in response to sounds, such as music, people’s accents when talking etc. It’s quite difficult to give a physical shape to unseen things! But, it does help imbue a typeface with an emotion. My feeling is that the Saw shapes which you have seen everywhere in Walthamstow is interesting and certainly a valuable angle, but only one aspect. The letters you have shown me have a clean, industrial and slightly geometric feel, and the typeface ultimately will communicate this. Is this what you intend to communicate about Walthamstow? I think it is also important to test it out on the target audience to see if they agree it is representative of their home-town. I think there are other unseen and more emotive aspects that you may have not yet explored, probably because you had your work cut out with the other aspects of the project. Potentially, the community responses to the online tool may feed into your ideas. Different cultures may also have something visual to bring to the type, not just a different script and language, but a flavour of other cultures. At this early stage of the typeface design (with only caps part-done), it would be fine for it to metamorphosis according to new research and influences. Quite often I will end up far away from where I started – when rationalising, experimenting and targeting the design to what you intend to communicate, typefaces often evolve and that’s perfectly OK – as long as the design’s intended message is crystal clear to the audience/users! That’s where the mini brief comes in! 🙂 Being a relative newcomer to type design, it does take a while to ‘get your eye in’ and notice discrepancies, such as letter to letter proportions, stokes looking a little darker or lighter than the others (see K diagonal strokes), ink traps (see extra bold weight M & N). You did the right thing by referring to Karen Cheng’s excellent book “Designing Type’. I would also recommend you follow on Instagram 2 accounts – Grilli Type and also OHNO Type Co. Also follow Oldschoolnewschool account. They have recently posted some excellent resources for getting proportions right, allowing for ink traps and many other great tips. I am also very willing to give you feedback and critiques as your typeface progresses after the MA. Message me when you’ve had a bit of a well-deserved break after hand-in! It’s important to test the letters out in actual words and strings in sentences – this should be done as early as possible. Pangrams such as ‘the quick brown fox jumps over the lazy dogs’ really helps reveal anything that leaps out and interrupts reading. It must always be remembered that ultimately, typefaces are a tool to facilitate reading. You have begun with the M, but I would usually recommend getting the H & O correct first. This will give you the treatment of the rounds against the straights, which will influence the whole typeface and help get proportions and weight right. I tend to sandwich all the other letters between the H & O… such as typing….. HHOHOOHOAOHAH. It also helps get the inter-character spacing correct. Actually, I mostly start with lower case n & o, as l/c is far more used than the upper case, and then I later design the caps to fit in with the l/c. Dalton Maag also do this. But, the Grilli Type posts cover that very well, with nice animations! If it is to be used for both print and screen, at some point you will need to research what makes a good screen font. And what makes good legibility in print. The design will need to be tailored according to your findings and tested.
This is all so helpful. The length of the reply!
I always knew that the typeface wasn’t going to be the full end result of the project, but when I felt a bit lost it was something that I worked on to re-centre myself. Given the lack of submissions, I knew I would find it hard to get a suitable lack of feedback from the community about the typeface so I didn’t really try! But it is essential to make it work and to represent. I hope the other activities awaken a typographic interest in some people in the community that means they want to and feel able to give an opinion on it.
Geals also points out that I started at the wrong point – the M rather than the H and the O. This is appropriate given the source inspiration built in terms of type design eeeek! I think everyone has to start somewhere, and go on to refine it.
For a first typeface, I’m pretty proud. there is SO MUCH work to be done, and I don’t underestimate it, but i have enjoyed having a project that I can channel when times have been tough.
Over the weeks I have been working on the glyphs for the saw tooth typeface:
These are super rough, and it’s my first typeface! I transported them into the Glyphs app:
And here is a Zoom in:
At this stage, I decided to contact Anne-Marie Geals, who I had a conversation with earlier in the module. She has kindly agreed to give me feedback on my typeface. While I did this, she suggested that I:
What I think will be important for you to do is a ‘Short Project Description’ for the typeface aspect. It will help you enormously. I think that it is vital in terms of assessment that you show conclusively (evidenced) that you have thought about the typeface in terms of; • What do you wish to convey with it – e.g.. emotions, feelings, a message, and does the end product communicate what you intended?• Who is it for – target audience. Have you tested it in the target audience?• How do you intend/envision it will it be used – e.g. headlines, body text, editorial, printed, online. To give you an example, I had to write one for my MA, and it was so useful. I referred back to it every day;
A new typeface inspired by, and designed for, Wales and the Welsh to help facilitate the use of the declining language. Its aesthetics will be culturally expressive, yet practical and include the full set of glyphs required for bilingual typesetting. It will be designed for long, immersive reading in both print and screen-based media.
You can see the description clearly states what I was aiming for, who it is for, what it is for, and how it is intended to be used. I had to evidence that I had considered the needs of screen and print based media in my designs, and whether my typeface functioned as well as I hoped in these environments (evidence of testing). I also had to evidence how my Celtic visual theme/style had been inspired by my research. I also evidenced that I had tested the working font on Welsh people and had received feedback.
Nadine Chahine, whose Font li Beirut project I have previously covered, describes a typeface brief as such:
Type design is equal parts suffering and euphoria. It is a walk along a winding road that goes on for many weeks and months before it’s done. A type design brief is like a charter path: It asks you questions, and the answers will guide you to where you want to be.
So, what do I want this typeface to be/do? Here’s an unstructured list of my thoughts:
Personal response to the area of Walthamstow
Embody the history of varied industry in the area
The saw tooth roofs and the Warner house arches used to inspire the shapes represent everyday people
Variable typeface with axes on width, weight and roundness
Display typeface rather than for long passages of text
Showcase the ethnic diversity of the area
San-serif font
There is also a difference between what the typeface is now and what it could be. At the moment it is just an uppercase, and doesn’t have a full set of glyphs. It only caters for the Latin font, and doesn’t include characters needed for European languages. To make it truly represent Walthamstow it needs to cater for Tamil, Bengali and Devanagari scripts too. I haven’t tested it either, or considered the difference between print or screen.
I’m going to copy Geal’s statement directly, pasting in my details in order to construct something myself.
A new variable typeface inspired by the architecture of Walthamstow to embody the innovation powered by the community. Its aesthetics will be geometric to represent the community’s burgeoning awareness of typographic style. Its will shift its appearance on weight, width and roundness axes and include the full set of glyphs in Latin and European scripts. It will be designed for eye-catching display type in both print and screen-based media and for free personal use by the community.
As you know, this project came from a previous module, and so I have a fair amount of branding already done. Still, I think it’s good to test out a few things to make sure I can make the best out of it.
The top line has been drawn over with felttip pen to give a pleasing ragged edge then scanned.
I wanted to experiment with the thickness and density of the scribbles making up the letters, so used different pens, pencils, crayon and charcoal with varying strokes to achieve this. Here are my experiments and notation about what worked and what didn’t.
I also found that I like the ‘e’ tilted so that the crossbar is pointing upwards rather than horizontal.
I do really like the current logo because Stowe has a pleasing weight and neatness that I didn’t achieve in the new experiments whilst still retaining a craftiness. I don’t like writing the Framework underneath – I’d rather have it typed – because it provides contrast and looks more polished.
From this stage, I’ve gone onto tinker with the logo some more and used the experiments above to refine the look.
I used Illustrator to create a vector file and touched up the letters.
Playing around with a website logo and favicon using different weights of Archia.
After consultation with my esteemed cohort, I am go with logo 5 as it has a nice balance between the two elements:
New
Old
As you can see, the Framework in the new logo is now justified under the Stowe and with a bolder version of the typeface. The t in Stowe is more defined too. A good result!
For the favicon, I’ve decided on this one:
It will work at a small size and on light and dark backgrounds, as shown above.
Over the weeks I have been working on the glyphs for the saw tooth typeface:
I’ve changed some of the glyphs from the previous – the F, E and I. I did think that the Emigre E was cool, but distracted from other features.
I’ve been working through Designing type by Karen Cheng (978-1-78277-544-8) as it provides a usual step by step for each glyph set and gives existing examples. For a san-serif uppercase, it recommends starting with an O and an E, with a W and M one of the last characters to design. Because this typeface is so inspired by the saw tooth roofs, I’ve had to work backwards a bit.
As well as showing photos on maps, I would like the website to show submissions from the workshops. After my first submission yesterday, I have created a section of the website to display the outputs. Here is the finished look, which you can also see here:
Current look
Here is how I did it …
I use Wix to host my website and uploaded test images.
Wix has a nifty data collection tool so that you can use a CMS to flow into your website. I started by creating a table with the test images to populate the gallery.
On a new webpage, I created a gallery to link to the dataset.
I connected to the dataset successfully
To create a more full look, I created dummy items based on the template letters. Each letter has a title, image, description, contributor name and tag for filtering.
Here is a mid-point look with the letters populating in any order
To filter, I experimented with choices linked to tags and filled them out. However, it has to be a dropdown feature so I reworked the page.
Here is the final page with the letters in order with a dropdown and an All button to reset the filter.
Here is the filter in action for the letter M.
The gallery allows for each image to be shown in an expanded view with contributor credit and description.
I’ve been trying to think that if I put posters up around Walthamstow, what would they be?
I’ve been inspired by the Demo Festival that Studio Dumbar hosted in Amsterdam to showcase animation talent during the Covid lockdowns and also the local treasure hunts set up by Angry Dan. You can see the post with inspiration here.
I want to incorporate letters I have designed in the type output and combine them with community input. I’ve decided that this will be in the form of ‘one word’ answers to Walthamstow is … that I have released on social media.
Each letter will be allocated a word, so 11 in all, and designed to make an aesthetically interesting poster that can move in AR. The posters will be posted up in places in Walthamstow with a map so people can go around and capture each one.
After all, I’m not sure that I am going to follow through with this. I like it, but there is much I can do by supporting the current ideas of the project after the lockdowns are lifted. I’ll keep this in my pocket for a future project in the area.
Using QGIS software, I have created a base map with images I have taken over the past year.
18 March
QGIS/GitHub/Wix link successful
Here, you can see that the webmap has all linked up. Yes, there are a lot of features that need to be improved, however, now the link is set-up, I can be sure that what I do is directly sent out.
From this image of sawtooth industrial roofs,. Walthamstow has an industrial past, with the London Rubber Company and film studies setting up in the early twentieth century.
The shape of the saw tooth roof intrigued me, and I saw the motif everywhere, from the top of gates and on modern residential buildings.
description test
description test
description test
The sawtooth looks very much like a capital M, so I started building the typeface from this. A few sketches of my first type and how I could keep lines straight rather than use curves:
I built up a few template lines to be able to keep them consistent, with notched edges like to make the shapes more interesting. The typeface is designed as an upper case only typeface.
I really love how the A and V letters in the examples below fit into each other and how letters such as H and T are ligatures:
So I thought that some glyphs can have a slant in different directions that can also be used for an italic version:
I thought about, if I wanted different weights, how to break down the strokes:
After a tutorial, Stuart recommended Emigre magazine for typefaces as a way to play around. As you can see they used pieces of paper to angle lines in the same way I use grey boxes!
I really liked the E’s at the time, and wanted to use that diagonal detail. In the diagram below, I also try to make an O, which I was ultimately unhappy with.
After I’ve sketched out the components, I copy the features to a new board and expanded the experience.
As you know, this project came from a previous module, and so I have a fair amount of branding already done. Still, I think it’s good to test out a few things to make sure I can make the best out of it.
Typefaces
I am using the typefaces Archia (san serif) and Calendas (serif) from the Atipo Foundry – I like pairing the typefaces from the same foundry as it gives a more cohesive feel. Both have a few difference styles in the font families, but not so many to be overwhelming. Calendas Plus is a serif font with a pleasing stroke contrast and is suitable for long stretches of text. It also has some interesting discretionary ligatures as extra glyphs (see the as and us below) that give it a special feel without being too distracting for the reader.
Archia has a modern geometric feel that contrasts to the traditional feel of Calendas. The ‘a’ is single story, like Calendas, and some letters like the lowercase ‘l’ have slab serifs to make reading easier. The descender of the ‘g’ has a flattened base, and the ampersand has a flattened top loop, which gives it some distinction. It can be used for very heavy text, for captions in small sizes, or in lightweight spaced capitals for headings.
Licenses
I’ve checked the licenses for these typefaces and I can use them for what I want. I have bought them.
“this font family can be used for personal and commercial works. you can use this font at a single home or business location on a maximum of five (5) cpus.
you can do any kind of design work with this font family, including logo/trademarks design.
the font may be used in editable embedding pdfs and other similar documents.
the font may be used in e-publications.
this font family can be embed into one (1) website (unlimited pageviews) so that it can be displayed on any browser.”
The logotype uses a scribbled graphic style that is used to sketch out how a typeface might look in the first stages:
This is the logo that I have been using:The top line has been drawn over with felttip pen to give a pleasing ragged edge then scanned.
I wanted to experiment with the thickness and density of the scribbles making up the letters, so used different pens, pencils, crayon and charcoal with varying strokes to achieve this. Here are my experiments and notation about what worked and what didn’t.
I also found that I like the ‘e’ tilted so that the crossbar is pointing upwards rather than horizontal.
I do really like the current logo because Stowe has a pleasing weight and neatness that I didn’t achieve in the new experiments whilst still retaining a craftiness. I don’t like writing the Framework underneath – I’d rather have it typed – because it provides contrast and looks more polished.
Anna Robinette 