Sally Hope is a Designer and Educator with a specialism in Typography. She was happy for me to present my current project to her for feedback.
Overall this was a productive meeting. Right from the start Sally recognised the value inherent in design through play, commenting that “when you do go through these exercises, and you have a set of component parts, and then you start playing with them. I think, for me, that’s the most exciting thing, because then you start to get a real feel of how everything works together”. Sally was also able to understand my historic reference points in the designs of some of the forms, noting the presence of the “mark the hand” in relation to the angles of the strokes in the curves letterforms and the “Circle Square Triangle” forms within my EL Blocks 3d printed experimentations.
We discussed the importance of details and oddities within the forms, for instance the small circular notches cut out in some of the strokes in the curves experiment and how these relate directly the quirks and intricacies of different typefaces. It’s these quirks that set one typeface as being distinct from another.
There were a few areas Sally suggested I look at. One is the relationship between these components I am making and patterns. With being grounded in geometry, the exploration of them as abstract patterns may be interesting. The next point was to consider that the forms have both a positive and a negative, so when overlapping or combining the forms there may be further shapes that can be created. Finally she suggest I look at the work of, Graphic Designer, Sooji Lee who has similarly looked at deconstructing letterforms into their component parts.
In many ways the preparation for the presentation helped me to focus on what my aims for the project were, and also what is achievable within the module itself. Sally helped me to understand that often a project like this may start in a Masters and then grow further into a larger research project. Before the presentation I was worried that with working on the project for so long I might have lost sight of whether it was relevant/interesting to my target audience. However Sally’s enthusiasm for the project was a helpful incentive to feel like I am progressing in the right direction.
Sooji Lee – in process of_ making Bodoni typeface
Sooji Lee’s work, in process of_ making Bodoni typeface (2019) seems very relevant to my project. In it she has deconstructed the Bodoni alphabet into it’s component parts and created a physical tool from wood that you can use to attempt to drawn the Bodoni typeface. It is an intersting exploration of the difference between a letterform and a typeface, Lee writes “The two basic essences of a letter are ‘writable’ and ‘readable’. On the contrary, Typefaces can be read, but cannot be written.”
My discussion with Sally helped to solidify the aims of my project as well as define the goals. With that in mind I felt it was helpful to explicitly state my current aims, audience and perceived outcomes as although my work and thinking has been progressing in this direction for many months I have not stated it within my journal.
Pitch
My project revolves around the construction and recognition of letterforms and the creation of a set of tools to allow amateur typographers to explore the process of typeface creation.
This will be implemented through the construction and promotion of the ODD Foundry project. This will be a website that hosts and sells these tools as well as providing information about how to make use of them when designing letterforms.
The tools will be based around the exploration of the basic forms and shapes that reoccur throughout the alphabet (strokes, bowls, serifs, stems etc) as shown in this image by Ellen Lupton (2010).
Anatomy of a Letter (Lupton 2010)
The tools themselves may be digital (fonts, interfaces, brushes) or physical (3d Printed Blocks, Stamps, Stencils) dependent on what is most suitable.
Whereas, in the proposal stage, my aim was more commercial in intent (with the creation and selling of a typeface being the metric that would allow me to gauge success). My desire now is to create tools that will be useful in the education of individuals interested in the subject. With this in mind my evaluation of success will be based on aiming to get these tools into as many users hands as possible. This will give me a base of users to discuss the success of the tools with, as well as a body of work created using the tools.
References
LUPTON, E., 2010. Thinking with type. 2., rev. and expanded Ed. ed. New York: Princeton Architectural Pr
The core part of my project will focus on the creation of a set of typographically informed shapes that users can use to combine into different letterforms. In addition to this I will experiment with different ways of presenting these components to users via various tools. My hope with these tools is to lower the barrier for entry. Often printing blocks for letterpress are antique and the presses expensive, leading to them being kept behind locked doors at institutions. Some new lettering apps and tools (like the apple pencil) are available for the ipad, though again this creates a large cost related barrier for the novice.
It is my hope that users will be able to make use of the Odd Foundry site to quickly manipulate and create their own letterforms out of the series of shapes I have created. To do this I will make use of my knowledge of p5.js and combine it with my current letterform designs to create a prototype interface that I can then add more forms to later in the project.
I will also continue to explore how I can create physical tools and alongside the programming of the digital elements I will experiment with 3D printing blocks as possibly exploring the use of stencils and stamps.
Above. Initial design for the Letterformer. Users are presented with a limited set of components on a canvas that they can move around via controls on the right
p5.js
P5.js can use many different types of media. In my own experiments when learning the code I used it to manipulate sound files, gifs and vectors. Much of my work on the original Odd Foundry site made use of an interface I’d designed that allowed you to move around simple shapes (squares and circles) and alter their size and shape.
Above. The finished Prototype-2 interface from my previous site
For the Letterformer I needed to be able to manipulate complex shapes created in other programs. My forms currently have been designed in Illustrator, a vector program that allows me to export the shapes in various vector formats. A search of the p5.js documentation indicates that it is possible to load an image into the canvas (p5js 2021), while a conversation on the Processing forum indicates that it is possible to make use of SVG as well as jpgs and pngs (juju11 et al. Nov 18). Although an SVG would be beneficial due to it not loosing quality at different sizes, from my experiments a png also works well and it has the benefit of being a file format I will be using to display the forms on the page anyway.
There are a few ways that I can implement the use of these forms on the letterformer:
As a series of static forms that can be rotated on an axis and moved around the page via the use of sliders
As a series of stamps that can be placed with the cursor and used to build up the letterform multiple times.
A combination of both where the series of stamps can be placed on the canvas and their size/orientation is manipulated via a set of sliders.
Using p5 to randomly generate letterforms out of a set of components.
Through my explorations it seems that rather than making one definitive version of the digital tool I can create a series that encourage users to experience the shapes in various different ways. Both of these tools make use of Drukery’s idea that by providing a user with restrictions in the way that they interact with an exercise. She believes, as do I, that “the limiting is important so that students have a very clear playground set up and it helps them to focus.” (2012). These tools also introduce the idea of perception of forms and an exploration of the Laws relating to Gestalt as stated by Martin, Buskist and Carlson in their book Psychology . Primarily the Laws of Figure Ground, Proximity, Simplicity and Similarity. The also make use of some of the concepts outlined in Kolbs Learning Cycle.
Digital Tool – Randomiser When the page loads it presents a selection of separate pre-formed components arranged in a random configuration. It can be saved as a jpeg or a “generate again” button can be pressed to present another random letterform. This tool will help with creative block and allow users to perceive possible new outcomes for letterforms that they may not conceive. The outcomes will be presented as black forms on a coloured background, this will encourage the viewer to perceive the disparate shapes as singular forms separate from the background(Law of Figure Ground). By clustering them together, encapsulated by this coloured background, the eye should look for similarities in the forms (Similarity). By placing multiple versions of these random forms next to each other the brain is encouraged to perceive in an abstract way that the forms as letters in a word (Proximity).
Digital Tool – Explorer A drawing tool with all the different components available as stamps/brushes, it is about conscious, exploratory creation. Like a typographical doodle. The resulting form can be saved as a jpeg. This tool aims to allow the user to explorer the components in the same way as they would experience the shapes as stamps. This tool explores some of the concepts outlined by Kolb in their Learning Cycle and is an example of a user engaging in the Active Experimentation and Abstract Conceptualisation part of the cycle. This tool encourages experimentation and reflection, the marks the user makes are permanent and cannot be erased so before acting they must consider where they will make their marks (Kolb 2021).
Physical Tool – Blocks
As with the Explorer, these blocks provide the learner with a set of restrictions with which they are encouraged to experiment and reflect on their results. The restrictions are evident in the materials of the blocks – they are solid blocks that cannot be warped in any way and they will be based on a set of related measurements and divisions to allow them to be combined in different ways.
Physical Tool – Stencil
The stencil provides a low cost option for a novice wanting to experiment with the forms.
References
TUFTE, E., 2012. Inge Druckrey: Teaching to See [viewed May 10, 2021]. Available from: https://vimeo.com/45232468
MARTIN, G.N., W. BUSKIST and N.R. CARLSON, 2013. Psychology. 5th ed. Harlow: Pearson
KOLB, D. and KOLB, A., 2021. Experience Based Learning Systems [viewed Apr 19, 2021].
I had previously registered the oddfoundry.com domain and hosting at the start of the project and had set up a temporary holding page that will show to users if they access the site before I have launched it. This allows me to work on the site directly online and very easily test the site on multiple devices as I progress through the coding. Knowing that I would want complete control over the design and functionality of the site I opted to build it using the WordPress content management system and extend it’s functionality via the use of plugins, in particular WooCommerce that allows me to run a self hosted shop that can sell digital and physical products.
Left. Setting up the hosting Right. Setting up WordPress and WooCommerce
Installing WordPress is relatively easy and once set up on my hosting I began to install the required plugins and complete the set up procedure for WooCommerce. This involved creating a series of dummy products and pages of content so I that I could ensure the site was displaying content correctly. I also set up the site with an SSL certificate for security which will be needed if I plan to sell products on my site. During the Digital Media unit I had made use of the Bootstrap framework and I found it sped up my production time. As stated on their site, Bootstrap is “the world’s most popular front-end open source toolkit” (2021), html by itself doesn’t allow you to create, style and manipulate grids/buttons/drop down menus easily, by using Bootstrap as the basis I can make use of these components quickly and style them in the way I want them to display. Alongside Bootstrap I made use of a WordPress theme template generator called Underscores that produces all the standard starter templates for a WordPress site that I may need. By combining the Bootstrap framework with the Underscores starter templates I ensured I had a solid foundation to then build my custom site.
Above. The Bootstrap website showing examples of the different components built into it’s framework (2021)Above. Integrating Bootstrap and the Underscores core coding required some work removing and recoding certain components, primarily the menus and headers. Both included some code to make these display correctly on mobile sites, in most cases I opted for the Boostrap code.
Typography and Layout
With a basic framework in place I began integrating my initial site designs into the site. The lefthand column is set to be static, so that it remains in place as the user scrolls down the page. The site is responsive, with the lefthand column and main content area resizing in relation to the screen size. When viewed on a smaller device, like a mobile phone, the design reconfigures to be a drop down menu from the top of the screen. Adobe fonts allows me to make use of various licensed typefaces, in this case Futura PT and Baskerville PT. The Bootstrap example page provides a list of dummy text to test the application of the different typestyles so this worked well as a sample sheet of how the type displays. Baskerville, visually appears very small even at a type size that would normally be standard for digital work so I increased the sizes proportionally.
P5.js
A primary component of my site will be the ability for users to explore the manipulation of letterforms. To do this I am going to use, the open source JavaScript library, p5.js. I have previously made use of this in my Digital Media unit, creating various prototypes for drawing on screen and arranging components via controls on screen. Using libraries like this within more complex hosting environments and more complex sites such as my planned site can be problematic, with different ways that hosting servers are set up interfering with the displaying of the p5.js code even before I’ve be able to test whether the code has be written correctly. With this in mind, once the site was set up with a basic design the next thing I did was attempt to duplicate some of the more basic p5.js experiments from the previous module on this new website. Each experiment that I made in the Digital Media module increases in complexity and use of different technical features of p5.js, so they will be a good way to test the new site. Each p5 experiment is made up of a few files, the experiment itself (called a sketch and saved as a .js file) and the html page where it is displayed. As my tests progressed the interactions between the .js and .html file become more complex
Above. The home screen of the original Odd Foundry site made use of a script that showed randomly sized squares over the gridded background, these squares followed the users cursor. Here you can see I have duplicated this code onto the new Odd Foundry site. Other than some sizing issues, it appears to have worked correctly. This would appear to indicate the server is set up correctly. Above. For my unsuccessful second test I tried to integrate the most complex p5.js experiment I had created, Prototype-2, into the new site.
Unfortunately this was where I ran into my first major problems with only the basic outline of the experiment showing up with none of the sliders nor the canvas to draw upon displaying. This experiment needs the .js file to interact with the html file in a much more complex way than the last experiment as there are sliders that the user can alter to manipulate the size of shapes. Some further tests will need to be made to correct this. With that in mind I research some different ways to integrate p5.js into a WordPress site.
Problem Solving
p5.js Block
Searching on Google suggested using a plugin called p5.js Block (mapk 2020). The current version of WordPress uses a system called the Gutenberg Block editor to allow writers to add different blocks of content to a page (for instance a heading, an image, a gallery), the p5.js Block plugin adds a block specifically for holding the p5.js code. My first test involved me adding the same random squares experiment from the previous tests. This was unsuccessful.
Above. Using the p5.js block to add p5 code to page.
However with some adjustments to the code I was able to get it to run a different experiment, surface-3, in which a grid is generated on the page that a user can draw upon and edit the size of.
Above. Surface-3 experiment running on the new Odd Foundry site via the p5.js block plugin
As I gained confidence I moved to a more complex experiment, surface-4-1, which is based of the last experiment but with the inclusion of a slider that allows the user to change the size of the grid. This was also unsuccessful and didn’t render correctly. On scrutinising the code that is produced by the p5.js block I could see that it was misinterpreting parts of the code and converting the quotation marks that delineated named parts of the code into numbers, causing it to not render properly. All the more complex experiments make use of this ability to name components of the code so if p5.js block cannot make use of that feature I may need to try another option.
Above. Here you can see me highlight the code that p5.js block is misinterpreting
iFrame
When researching methods of adding p5.js to a site I checked the Processing forum (the language that p5.js is based on) and found a jobhas suggests making use of iframes (2017). An iframe is a component in html that allows you to view another pages content by embedding it on your own page. Initial tests seem promising with the embedded experiment from my old site showing up correctly.
Above. Using an iFrame to pull in content from my previous test site
I next tried to embed an experiment that was hosted on the current hosting. Although the sizing of the frame was cut off, the rest of the content displayed and functioned as expected. The only worry was that it was now showing the page as “not secure”, as indicated by the message in the address bar. The site is running with SSL certificate so this should not be showing. Thinking that it maybe because of the extra scripts running on the page I tried directing the iframe to a basic page on the site, however this still showed as “not secure” so it seems the issue is with the iframe itself.
Above. Using an iFrame to pull in content on the current siteAbove. Using an iFrame to pull in content from my current site to test if the “not secure” notification is removed
Some further research into iframes and security, as presented in the article by Nada Rifiki (2020) on the subject, indicates that there can be issues with iframes showing a site as insecure. However she indicates that as long as the page to be embedded is accessed via HTTPS, as well as the main page being HTTPS there should not be an issue. Both pages are from what I can ascertain secure and accessed via HTTPS which makes me think this may be a server configuration issue that I need to question my host about.
That issue aside, the iframe method does appear to be successful in its application. Further testing with a very complex page with multiple controls all appears functional with all the main features of the page working even when embedded. With that in mind I will push on with designing the site using the iframe method where needed whilst I query the host on the “not secure” issue that’s noted above.
Above. Using an iFrame to pull in content from my previous test site with a high level of complexity.
As decided at our first discussion, I presented my project in it’s current state to Chris Wilson for evaluation. It was the same presentation that I gave to Sally Hope earlier in the week. Overall Chris was impressed by the work produced so far and he understood my decisions with relation to the designs of the components. He to commented that the subject could further be explored as part of a PhD and that it might be worth narrowing the focus of the project in the final stretch so as to be able to hand in something cohesive for the Masters submission.
On reflection this was the most helpful part of the discussion. I have aimed to produce a great deal in a limited time and it may be worth focusing on the core components of the project and then expanding on them further after submission. He also suggested pushing the concepts of hybrid learning and how the digital can integrate with the physical.
Open Collab is a experiment in digital collaboration. Throughout the month they put out an open call for submissions on a theme that are the randomly combined with other submissions to create new works of art. This month it was the Typographic Session and they asked participants “to test, showcase and challenge your freshly designed fonts…This session the format is 1200×480px. Using your self-designed font, please try to find a word, that fills the format as good as possible. Feel free to use any language. The result will not only be a beautiful composition of fonts, but also a (hopefully) funny piece of 3-word-dada-poetry.
How to participate
Create a 1200×480px artboard
Adjust the fontsize to the height of the artboard
Find a word, that approximately fills the width
Do not leave margins – they will be added automatically
Export as jpg
Submit work
Best practice
JPG: black type, white bg
Single line of type
Try different color modes” (Open Collab 2021)
With that in mind I created my word “Inner” from my recent Tuscan experiment and submitted it. You can see it below combined with other submissions.
This was a fun experiment to be part of and was a good reason to start producing designs with my components.
Part of my proposal was the publication and promotion of the new work I have been creating on Instagram, both to create interest and awareness of the project as well as drive sales to the experimental prints and typefaces themselves. In my previous module, VIC706 Professional Practice, I made use of an online scheduling tool called Later.com to plan and schedule posts throughout the module. I found this particularly helpful during that module as it’s use addressed some of my weaknesses identified in my SWOT analysis.
Using Later.com gave me the both the confidence to motivation. I have signed up for a later subscription that both allows me to schedule posts as well as autopost to the odd foundry instagram. I will aim to post once a day to odd foundry and occasionally cross post to my main deadmethods account. I want the project to be a distinct entity, separate from the other work on my deadmethods account so that I can be experimental with the type of content I post. The aim will be to slowly raise awareness of my project through the remainder of the masters unit so that I then have a foundation of followers and content to continue to promote after the project is submitted.
Actions Taken this Week
Update ODD Foundry Profile with image and website
Follow relevant accounts
Post regularly on OF account
Cross post from Dead Methods Account over to Odd Foundry account to increase follows and engagement
One of the things that I identified earlier in the project was making tools that are accessible. Not everyone has access to a 3D printer, or to the printing presses required to use the 3D printed blocks. With that in mind I experimented with different physical ways I can create tools for people to use. In this experiment I created stencils and stamps.
Above are two different laser cut stencils to be used with a pen or pencil.
Here I have assembled my stamps by gluing laser cut rubber to laser cut acrylic components.
Experimenting with the stamps to create abstract designs.
Reflection
The use of the stamps has definitely been enjoyable – the act of inking up, considering it’s placement and then making an impression is very meditative and as good example Active Experimentation and Abstract Conceptualisation. However the production of the stamps was very involved, with a lot of hand assembling required for each stamp. Perhaps after submission I could experiment with creating silicone stamps using these as the moulds but for now I don’t think, as part of this submission, they are worthwhile exploring further.
It is clear to me that printing my blocks flat on the print bed creates blocks that are the most successful to print with, however the issue of removing them easily from the bed once printed needs to be remedied.
Normally a metal scraper is used to lever the block off the bed, one alternative option I have tried is to grasp the block with a pair of pliers and pull it off the bed that way. This method was unsuccessful, resulting in not just blocks whose sides were damaged by the pliers but some very stubborn blocks that were snapped in half, leaving part on the base and part in the pliers.
Through gaining experience with the blocks I have noticed that it is possible to position the corner of the scraper into one of the drainage holes and work the scraper underneath to free the block, though this works it also damages the surface around the hole leaving it unsightly. I resolve to redesign the body of the block to integrate some form of removable tab that after allowing me to remove it from the bed easily, can then be trimmed and removed from the block.
The results can been seen here where a small rectangle with a sloping face is joined to the block. This allows me to push the scraper directly underneath the tab to free the design from the print bed.
My first iteration was too small and insubstantial to be of use. However by scaling the tab up slightly it works in the desired way and is easy to clip off the block once cured.
I also took this opportunity to add a makers mark to the body, a small de-bossed ODD in the bottom left. It was common for type foundries to mark their wood and metal type with their makers mark, in wood type this was done on the capital A. My makers mark not only unifies the blocks as being set, it makes them recognisable as being produced my ODD Foundry. The consistent placement of the mark on the bodies will also help with orientating blocks to the be correct way up if the design has a top and a bottom.
