Introduction Week – Digital Marketing.

Digital Marketing, Learning Activities

This week i began my studies in digital marketing to further my abilities and skill set.
So i will be writing about this from an designer and illustrator`s view on this “art” blog of mine.

This was a fun week. I got to look around and prepare well for the year to come.
I am on my third year as a web-student so i am quite familiar with Moodle and how it works (Moodle is the web learning platform used for my studies / courses).

Making a new map (i did one for my previous studies) of the digital marketing portal was quite fun, and made me feel confident in navigating the studies further down the road.

Moodle Map

What was a new experience for me however were the daily tasks. Having the week split up in smaller tidbits like this i found very helpful. I use a software called Trello for project and task management so the daily tasks makes task entry and overview a breeze.

I am quite excited to begin studying digital marketing as i think it will be a very useful skill set to have in combination with my design and Illustrative goals. Or anything else the future may bring.

Thank you for reading.
-J.

Advertisements

Illustration – Wings of Blood.

Illusions, Uncategorized

This week i decided to try a new/different software for my illustration. Namely Krita.
Keep in mind, i have not been approached by anyone to write a review.

This is not sponsored content.


Krita is a professional free and open source painting program. It is made by artists that want to see affordable art tools for everyone.

  • concept art
  • texture and matte painters
  • illustrations and comics

https://krita.org/en/


 

Sketch progression : 

This slideshow requires JavaScript.

 

The software :

Krita worked nicely for the most part, i did push it with a rather ridiculous canvas size as i was thinking i would try to crash it.

Because of this there were a few moments with a 3 second lag every now and then. But nothing that managed to stall or break the software. Krita worked well for me throughout the week and was surprisingly stable.

If you are new too or are looking to just try out digital art without spending money on software, i would recommend this application.

It does not eat insane amounts of your computers resources, it is stable and has the tools you need to draw professionally.

 

gundropsketch7.png

Ridiculous canvas size…

 

 

Illustration :

I started sketching and ended up completing the line the work as well as add some blood spatter to illustrate a set of wings.

I did however spend a serious amount of time on the line art (as usual), especially on the gun. I did not create a new layer for the “fine” line art this time and instead refined the sketch itself to its finished state.

The reason for this was that i was focusing on the “dynamics” of the illustration to create some more depth in this one compared to my previous work. In short, using perspective to create a more three dimensional foundation.

I am planning on adding some more colour (other than the red of the “wings”) on a later date and spend some more time on the image so i can add it to my portfolio.

I am thinking about adding some skin tone and light colour and shadowing to the rest of the illustration. This while still trying to keep the high contrast of the crimson and white in the illustration.

 

WingsofBlood2.png

 

 

Until next time i hope you enjoyed this post.
Thank you for reading.

Illustration – “AI” – Geisha.

Illusions, Uncategorized

Tools :

The software i used for this illustration was Adobe Illustrator on the Ipad pro (also known as Adobe Draw). I later imported it to Adobe Illustrator on my PC to touch up and finish the image.

From sketches to illustration – progression.

Before i begin sketching i usually go through a thought process. Depending on the work i want to create, the time i spend thinking about the image and visualizing it varies.
After i have an idea on how i want the sketch to turn out i do some research.

Spending a few minutes on Pinterest i get some inspirations and visual impressions before i execute the first/starting sketch. Be careful with spending too much time on this however as you do not want the inspirations you receive from elsewhere to dictate how your piece turns out.

IMG_0077

The first step was starting a rough sketch, trying to capture the essence of what i am visualizing and trying to create with the image.

This is however not necessarily the right approach always. It was the way i started this illustration, but sometimes you just get a sketch you want to complete with no visualizing or intention as well.

The beginning of an illustration or sketch is always open to varying your approach. You could always start a new sketch if it does not pan out as intended.

IMG_0046

After the main sketch was done i spent some time experimenting with it on different layers, thinking about colours and lighting etch, this is evident with all the layers i used.

After i had spent some time thinking about the image i reduced the opacity on the sketch and started refining the line art on a new layer.

This is definitely one way several digital artists go about refining and create line work.
However this is not always how i go about it myself. Refining line art on a new layer is maybe an easy way of doing it but sometimes refining the sketch itself is a better way to approach an image, albeit a more difficult and time consuming approach.

IMG_0048

On this one however i refined the line work on its own layer. Spending some time adding details around the face and hair to create more interest and ensuring the face is the focal point of the illustration.

IMG_0049

I do this spending some ekstra time getting the line work to be coherent. meaning creating lines mostly in one long swift stroke with minimal amounts of breaks in between the lengths of the lines. This is to ensure the line work doesn’t look scratchy and broken up in between the endpoints.

IMG_0050

After i have finished the line work of the main sketch, i continue working on it adding more details. Focusing on shadows and where the light source is i draw in where the shadows  are to create some more depth in the line work. I also add more detail around the face and hair, trying to create interest.

IMG_0051

Finishing the line work is always satisfying to me, probably because this is where i tend to spend the most of the time i work an an image. This is when i begin spending time on experimenting some more with new layers and colours to figure out what i want to do next.

When i have made up my mind i start organizing my layers again to remove the unnecessary ones and clean up the work space. Keep in mind however that you should not delete the rough sketch layer. It is nice to have as a comparison later down the road of the illustration.

IMG_0055

Now the time to add colour has come, i played around with several combinations of colours to find the ones i wanted to use in this illustration.

I like de-saturated colours as they dont “glare” and strain the eye as much as highly saturated tones do. I want the image to lead the eye well without having too bright colours that steal the interest away from the focal points.

IMG_0061

After getting a base colour palette to work with mu drawing i started fiddling with the flowers on the fan the geisha is holding.

This is where i got stuck. This happens sometimes, you get stuck on illustration work and you dont really know what to do about it. I put the illustration away for a few days while thinking again about how to deal with this issue.

I the end i asked another artist friend of mine on how she would approach it (i specifically asked about the background colour). Blue was suggested as the colour for the background as she thought this would give the illustration some more depth.

In this i agreed, i played around with some blue hues that i thought would work well.

Pro Tip : When stuck, ask someone for directions.

A-I 1 - Drawing 2

To finish the illustration`s background i wanted a graphical element to round the whole image off.  In the background is the kanji for “Ai” drawn on a makeshift wall.

Of course when using graphical element from a written language that is foreign to you, one needs to do some research.

In Japanese, both “ai (愛)” and “koi (恋)” can be roughly translated as “love” in English. However, the two characters have a slightly different nuance.

I did some research and found this web page from ThoughtCo explaining what i needed to know for this illustration with, at the very least,  a small degree of confidence.

 

Feel free to leave a comment on this post and let me know what you think.
Thank you for reading, i hope you enjoyed it.

Mandatory Assignment – 04 – Design History Website.

Mandatory Assignments

dsgnstory black.png


Website : http://www.dsgnstory.com


Introduction:
This website is created to tell the graphic design history story from 1950 up to today.

The website must adapt to all screen types and the selected period must be easy to recognize.

It will also describe social events paralelling with the art at the time and some of the effects it had on the design and art of the different eras.


Concept:
The main concept of the website is simple. It is a hubspot for design history, covering the works of artists from the 1950`s up until present time. The site should contain information on the prevalent artists from the different eras and imagery of their art and design style.

This along with a description of their lives and/or paralelling historic events that may have a great effect on what they are doing at the time.This includes counter culture, political events (good and bad), current wars being fought.Along with protests made, especially in art form.

The website should be easy to navigate and the information provided is the core of it all.


 

Target Audience:
The target audience is graphic design students.
Anyone interested in learning about the art history in and around the topic of graphic design. This includes students that are self taught or anyone attending an institution to learn.


Imagery:
Any and all imagery should be created by the web designer for the most part, at least pertaining to the design and look of the website.
However, there is no way around using imagery from the different artists described in the different sections and eras without displaying the artwork from the different periods.


 

Front End Web Design:
By creating wireframes i have sketched out the main feel and usability of the web site.
I am focus- ing on functionality and ease of navigation. Scaling is paramount as this will ensure usability for pads and phones as well and is a big part of this assignment.

The information should also be presented well and be eye catching, without being too glary or extravagant. Associated imagery should be clickable (lightbox style) to get a good look at the image alone. The text should be well formated and arranged to be legible above all else.


 

Framework:
For the main framework of the web site i will add navigation up top and a small drop down menu for easy navigation to the specific time periods.

The main setup should be based on the website having a few main pages. For now i am thinking 2-3 at most and then making sure it is easy to expand it at a later date. This to be able to create for instance a mailing list or a signup spread at a later date perhaps when expanding the site.
The design history pages from the different periods will be considered sub pages under one of the main pages. They will be easily navigated with a side bar menu on the site. As well as a drop down menu in the main navigation header of the site.


 

Process:
My main process to begin with is always a long time spent on thinking about how i want the layout to be and how i should attack the assignment.

I then proceed to make a simple site map and some wireframes. I then spend time agonizing over finding the right domain name. It should at the very least be descriptive of what the main point of the site is and prefferably without being more than one word, two at most.

This time around i was lucky enough to find a .com name that i liked and that i felt i could work with for a long time. Namely http://www.dsgnstory.com.
This is a site name i could play around with and create more assets for as time passes and the site gets updated in the future. I created a small type logo to represent te site where the S in story is in caps while the rest is in lower case. dsgnStory is a well balanced set of characters in my mind and something i think is well worth working on in the future.

With the domain and wireframe in place i proceeded to build a mockup of the site and compiling the information i need for the different sub pages and pages. Meaning the written history from the 1950`s and the different eras. I do this while at the same time tweaking and playing around with the different headers to create individuality for the different periods and pages.


 

Phone and Pad Support:
I developed the page with phones and pads in mind, i focused on the website scaling well and work depending on what platform it is being displayed on.In the end it looks and works well on both Computer screens and phones as well. This is due to the scalability of the content.

I did this with the use of the Squarespace engine instead of using WordPress. Even though you can use templates with great success on wordpress, the squarespace engine seems to be alot better when it comes to scaling and performance in the end.


 

Experiences and insights gained:
Learning about the different periods have given me a good insight into where my daily inspirations actually stems from.

Especially the Psychedelic movement were interesting to me as i learned about the style and how it affected art in accordance with music.

I love a good band poster and album art has always been of interest to me. To see that era of posters done for musicians lead me down the rabbit hole to see where a lot of the posters i had accumulated on pinterest etc as illustration inspiration stem from. Even though the “Sixties” were 25 years before i was born there is definately an aesthetic that i can see in artwork everywhere in some way.

I also remember the graffiti movement somewhat from when i was a kid and how awe inspiring it was to me to see an artistic subculture form in the urban areas.

I also found myself planning the future of the website after its completion. Leaving room for expanding and maintining the site for time to come. I belive i have created a resource that may benefit other students as well as a refference for future use in a well compiled manner.

Keeping the site up and maintaining it is something i planned for. I found tidbits around here and there but most of them were outdated or did not go deep enough into the subject matter.

The sites i found that did go deep into the history looked for the most part like an historian or an archaeologist had designed the site. This in my honest opinion made the subject matter boring to read before you even started reading it.
But that is me personally, i am a visual person.


dsgnStory-logo-black


Research and Refference Material :

Books :
Graphic Style – From Victorian to New Century – Steven Heller and Seymour Chwast.

Sites :
https://visualartsdepartment.wordpress.com/psychedelic-60s/
https://en.wikipedia.org/wiki/Psychedelic_art
http://cf.libguides.com/c.php?g=121344&p=792163
http://www.creativebloq.com/art/pop-art-8133921
https://www.behance.net/gallery/3873153/Swiss-Style-Posters
http://www.designishistory.com/
https://en.wikipedia.org/wiki/International_Typographic_Style
https://en.wikipedia.org/wiki/Helvetica
https://en.wikipedia.org/wiki/Sans-serif#Neo-grotesque
https://en.wikipedia.org/wiki/Counter_(typography)
https://en.wikipedia.org/wiki/Akzidenz-Grotesk

Learning Activity – Designing for Performance.

Learning Activities

Learning Activity – Designing for Performance              (3 hours)

Surf the web and find 5 examples of websites that have been coded and designed for performance.

https://futureoftransit.designit.com/home

http://interactive.unwomen.org/multimedia/timeline/womensfootprintinhistory/en/index.html

https://www.10thousanddesign.com/

http://www.stylenovels.com/en/

http://www.associationforpublicart.org/

Learning Activity – Creating a Brief.

Learning Activities

 

  • What is the client’s service/product?
    – Musician / Band.
  • What are their requirements?
    – A one stop site to post upcoming tour dates (Blog style), links to their albums and publications (Spotify). Biography page.
  • What is the website’s goal?
    – The websites main goal is to be a hub for their social media and informational posts along with information on how to get in touch with the artists.
  • How are you going to achieve this goal?
    – Using WordPress is the “easy” solution, using a tailored design and execution, it will cover the needs for the client(s). It will also be good for better updates and upkeep of the site in the future.
  • Build the website architecture (so we can see what sections will be needed)
    Website architecture
  • What is the design style that will be required?
    – New, Rustic, Rock.I like grabbing a few key words and build around them when designing for instance a mark. What definitely was a feeling along with the sound of the group was that they are merging new ideas with old ones. To better Illustrate this a small mood board was created.

  • What are your suggestions for marketing the site?
    – Facebook is a given as the group already have a presence there. In addition to using the existing social media i would have a flyer created, to be given out at places they play as they travel. Posters are also an option depending on the venues and gigs they play. Another way is to have an e-mail list followers can opt into on the site.

Learning Activity – Providing Your Own Hosting Service.

Learning Activities
Learning Activity – Providing Your Own Hosting Service

(2 hrs)

This learning activity is to acquire your own hosting service. This hosting service will be needed throughout the rest of your studies, and this Learning Activity is therefore mandatory.

You are free to choose any hosting service in the world. If you find it difficult to find one, we recommend one.com.

If you choose one.com, the monthly fee is only about 1,5 USD a month, and there are step-by-step guidances to setting up the account, creating e-mail addresses, connecting via ftp etc.

By acquiring the web hosting yourselves, you get (depending the hosting service):

  • Valuable training in providing hosting services
  • Domain name of your choosing
  • Personalised e-mail account with your own domain name
  • Cloud drive
  • A lot more space
  • 24/7 support
  • The service and domain name remains yours after your studies are done (if you wish to keep it)

Consider your domain name very carefully. This cannot be altered. (You can of course sign up for other domain names and delete the one you have, but “getting it right the first time” saves you a great deal of trouble.)

Also note that it can take 24 hours or more for the hosting provider to complete the registration. In some cases, you may need to print out a document, sign it, scan it, and e-mail it back to the hosting company.

 

I personally use Domeneshop.no for all my domain purchases and have several domains hosted here. I always have a good experience using this service and have been pleased with them over the past 5 years as one of their users.

Learning Activity – Analysing the Use of Design Fundamentals.

Learning Activities

Choose any one of the illustrations from the lesson “Design Drawing” and answer the following questions (when submitting your feedback – also provide the illustration you chose):

  1. What fundamentals are used successfully? Describe in detail what you think is the most successful aspect of the illustration (remember to focus on the fundamentals.)
  2. What style from the past is being used in a new way in this illustration? If no previous style is clearly apparent, does it use some form of pastiche? Why do you think this specific style or pastiche was used? Describe in detail whether you think it was used successfully or not.
  3. Read again what Mondrian said about the expression of beauty or self. Which do you think played the dominant role in the execution of this illustration? Explain your thoughts.
  4. If you had to create this illustration, before starting the actual execution, what would your initial thoughts be on:
  5. Colour (what would your approach to colour be?)
  6. Line (what would you like to portray with the use of line?)
  7. Composition (what would you wish to instil in the viewer by the use of composition alone?)

 

 

madiba

 

The image links in the assignment were broken so i decided to just choose an image i personally liked from Tahier Variawa`s page.

1 – The fundamentals used well in this image in particular is shape building. The shapes themselves are simple at thje core but together they create a recognizable illustration of whom i believe to be Nelson Mandela.

2 – When considering whether this image is inspired by any style or techniques from the past, the first that comes to mind is that it is somewhat reminiscent of what Warhol did with his celebrity illustrations. Using somewhat strong colours, simple shapes and techniques to bring forth a more complicated illustration.

3 – Mondrian says “although art is fundamentally everywhere and always the same, nevertheless two main human inclinations, diametrically opposed to each other, appear in its many and varied expressions. One aims at the direct creation of universal beauty, the other at the aesthetic expression of oneself, in other words, of that which one thinks and experiences.” (Theories of Modern Art:350)

To me, the self seems to be the apparent in this illustration. Catching the personality and essence of the person portrayed is more important in this instance rather than just creating beauty.  However the artist also successfully created interest in this image as well with the use of squares and shape building.

4 + 5 – If i were to think about and philosophize over creating this image, knowing i wanted to build the shapes the same way, i would probably begin with looking up a reference image and try to recreate the shadows and the deepest dark shapes and spots in the portrait.

Then i would be off to a good start with the main shape of the persons face using squares. Then i would fill in the rest of the shapes using colours, doing this also in squares.
Finally adding highlights the same way.

During the process however i would really need to back off and look at the image from a distance every now and then to ensure i am on the right track.

6 – Lines in this illustration is most visibly notable in the shadows and squares, if i were to illustrate this i would probably start with this as explained earlier, in this image however the artist (Tahier Variawa) may have added these after creating the main shapes of the portrait in colours.

7 – Composition is key, it is one of the most important concepts you need to learn as an illustrator and designer. However, composition is sometimes difficult to grasp for beginning artists.

I got a very good understanding of composition after becoming a photographer. And i found that that is one of the best ways to learn about composition and its concepts.

This image has a good composition and it leads the eye to where it should rest. The chest and the shoulders fram the head nicely in a way that does not draw away focus from the focal points of the illustration, meaning nelsons face.

 

Thank you for reading.

– J

Learning Activity – Focusing on Pioneering Designers.

Learning Activities

Within the broader milieu of Neo-modernism, we focus on Marian Bantjes, who set design trends with her unique application of typography, loose illustration and well balanced compositions.

http://bantjes.com

bantjes_2006_seduction

This poster is in the permanent collection of the Cooper Hewitt Design Museum (Smithsonian) in New York.© 2017 Copyright Marian Bantjes.

 

 

 

What is your opinion on  the use of the computer combined with different media? :

Using computers and technology in combination with more traditional media is in my opinion crucial.Ensuring that you have both the skills in the use of new tech as well as the use of traditional means to convey a message speaks volumes about how good you really are as an artist, be it an illustrator, designer or photographer.

Artists that only use computers and have no real skill in drawing and sketching on traditional paper have a tendency to create lifeless imagery in most cases. There are only a select few artists that can pull this off. This may be because they have a very specialized style or way of working, however, you usually find that to some extent, they can do both traditional and  digital work.

The cool thing about being an artist is that you can specialize in what you like working with the most. As time passes you get ideas and try to experiment with different medias and technologies, Some find the one thing they love and specialize in it. Other artists work in allot of different medias because they simply need the variety.

How you end up working as an artist and what you create, be it through your process, style or even what media you use to convey your message, this is highly individual.

The aesthetic of what you create, then becomes your voice. Small things like raster vs vector, pre-sketched on paper and scanned vs digital sketching, all these small differences have an effect on the finished result, that is in the end usually defined as “style”.

Even using Adobe Illustrator on an Ipad is different than using Illustrator it on a PC workstation, even this tiny difference makes an impression on the way you work and changes the end result in some way. Even if you are not aware of it.

The tools you use can be varied and using technology in creating is something i think most artists would benefit from. However in the end what software and tech or materials you use does not matter, unless you develop you general skills and especially your eye for the arts. Software and tools can only be used well if you spend time developing your eye while you create.

 

swissted_11

 

The relationship between image and text : 

In this section of the post i will explain the connection between image and text in neo-modernism and how it relates back to the Swiss design style.

The use of grids with typography is ever present in design, especially when it comes to poster design and front pages, even on flyers. A good poster design is well composed, this often is up to the eye of the designers but the best designs are created while using a grid to align everything in some way.

Even in Swiss designs where the headlines and text create interest while being asymmetrical in their respective layouts rely on the use of grids to look good and reach a professional standard. As an artist you have the creative freedom to play with typography and illustrate the typography itself and around it.

There are rules in place for creating good typography with a heavy emphasis on legibility, as a creative however there is nothing stopping you from creating interesting visuals with typography and layouts.

This may not be theoretically correct always, however if the composition is solid and it looks good it can be considered good or even great design. In other words, different can be good as long as it is done well. We all need to understand that being different just to be different, seldom vibes well with the designs or in the eyes of the beholders.

 

Thank you for reading

-J

Learning Activity – Research on Late Modernism.

Learning Activities

Research,

influences and analysis,

the Swiss international style : 

 

How would i define the style : The Swiss international style was the basis of much of the development of graphic design during the mid 20th century.

The main characteristics defining the style is highly legible and bold sans-serif typefaces, usually accompanied by photography as a means of visual communication. Imagery of cars, motor cycles and other vehicles like planes and ships was also very prominent, as they were considered big symbols of modernity.

The most recognized and influential works were developed in the form of posters. This was due to posters being considered the most effective means of communication at the time.

What i find most interesting about the style and its philosophy is the use of grids and asymmetrical layouts while still leading the eye in a preferable manner over the poster/message.I think this creates interest and keeps the eye of the beholder for a longer period of time.

17ed3f280af97cd830be78a001f29818
Image by Ruffhaus Design.
Style Philosophy : Objectivity, legibility and simplicity.

The characteristics of the style is influenced at its core by mathematical grids. By using them the designer ensures the end result is harmonious and the information is structured from the start of the design process.

The text and information is then applied, usually in a flush left, ragged right alignment.
The fonts chosen for the texts were sans-serif, and was thought to express a more progressive and modern age by the designers at the time.

Prominent Typefaces used were Akzidenz – Grotesk and later on the typeface Helvetica was developed by Max Miedinger and Eduard Hoffmann. The helvetica typeface was created to be (at the time) neutral with great clarity and readability.

It was heavily inspired by the Akzidenz – Grotesk typeface and was in fact named “Neue Haas Grotesk” at the time. It was renamed to Helvetica (“Swiss” in latin) to make it more marketable internationally.

In recent times as we have adapted screens and displays in our daily use, the typeface (Helvetica) is considered to be limited in its legibility due to its narrow apertures. It is also apparent that the legibility is compromised when used in small print sizes.

Influences on the Swiss style includes Constructivism, Suprematism and most notably the Bauhaus and De Stijl.

The Bauhaus movements motivations in the 19th century was to improve upon the soulessness of manufactured products. They felt that creativity and the industry manufacturing for every day life were drifting apart.

Bauhaus, a German word meaning “house of holding” was a school founded in 1919 in Wimar, Germany by architect Walter Gropious.The school was based on the desire to reunite the applied arts and manufactoring, as well as reform education.

Experimentation and problem solving at the Bauhaus is enormously influential for the approaches to education in the arts.
It has led to the “fine arts” being re-thought as the “visual arts” and as a form of research and the use of a more scientific approach.

Function over form was the main school of thought and is still widely used in graphical design today.

The De Stijl movement (The style),The futurists and constructivists wanted to destroy the old world and create a new one based on the machine, industry and socialism.

De Stijl rejected the traditions they belive caused world war 1, but unlike the futurists and constructivists they wanted to rebuild the world with an approach that merged math and harmony.

 

Joseph Müller-Brockmann.

One of the best known designers from the Swiss international style is Joseph Müller-Brockmann. He was influenced by the ideas of several different design and art movements including Constructivism, De Stijl, Suprematism and the Bauhaus.

beethoven
Some of his most decisive work was done for the Zurich Town Hall as poster advertisements for its theater productions.

He also became a teacher at the Zurich school of arts and crafts. Spending most of his life publishing several books on graphical design and on the visual arts as well as teaching even into the early 1990`s.

There is no doubt his work, books and the philosophies he taught has strongly influenced Graphical design, especially the Swiss style, not just for the present, but well into the future.

Armin Hofmann.

He began teaching typography at the Basel School of Design at age 27. He had already completed his apprenticeship in lithography at that time. He himself along with his colleagues and students were integral in structuring the theories and the work surrounding the Swiss international style.

The philosophy behind all this was a belief in an absolute and universal style of graphical design, the style goal was above all else to create clear and good way of communication.

In doing this they practiced new techniques of photo-typesetting, photo-montage and experimented with composition as well as a heavy use of sans-serif typography.

It did not take long before he became the head of the Basel School of Design. Using the Swiss international style and having a belief that the poster was one of the best ways of communication at the time, in particular for the Basel Stadt Theater.

As Joseph Müller-Brockmann did, Armin Hofmann wrote a book on his philosophies and practices, his book and work is still a refference for all graphic designers.

 

 

Thank you for reading.

– J

 

Refferences and research :

http://www.designishistory.com/

https://en.wikipedia.org/wiki/International_Typographic_Style

https://en.wikipedia.org/wiki/Helvetica

https://en.wikipedia.org/wiki/Sans-serif#Neo-grotesque

https://en.wikipedia.org/wiki/Counter_(typography)

https://en.wikipedia.org/wiki/Akzidenz-Grotesk