Skip to content

Commit

Permalink
Tweak typography (#52)
Browse files Browse the repository at this point in the history
* Replace hyphens with non-breaking hyphens

* Tweak type in project template

* Minor adjustments to copy

* Improve type on laptop screens

* Re-bolden site title in header
  • Loading branch information
emmnunes authored Mar 3, 2023
1 parent 8c557d3 commit 119bfbd
Show file tree
Hide file tree
Showing 10 changed files with 75 additions and 52 deletions.
6 changes: 1 addition & 5 deletions src/components/Header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const MainHeader = styled.header`
border-color: ${(props) => props.theme.colorYellow};
strong {
transform: translateX(-200%) translateY(-50%);
transform: translateX(-190%) translateY(-50%);
}
small {
opacity: 1;
Expand Down Expand Up @@ -133,10 +133,6 @@ const SiteTitle = styled.h1`
margin-right: auto;
text-align: center;
strong {
font-weight: normal;
}
@media ${(props) => props.theme.smallUp} {
font-size: ${rem(18)};
width: 100%;
Expand Down
8 changes: 4 additions & 4 deletions src/pages/projects/bore/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ order: 7

<article role="article">

I am, by no means, a musician. But I grew up surrounded by them: my father and older brother, who are both multi-instrumentalists, and the several musicians they've played with throughout their life. So, growing up, I had a pretty big incentive to pick up a guitar and dedicate part of my life to it. For some reason though, I never did. It seemed as though, for any sort of activity to pique my interest, it had to somehow be connected to a computer. So when a friend of mine introduced me to electronic music back in high school, something clicked. All throughout my teenage years, I spent most of my free time experimenting with [Fruity Loops](https://www.image-line.com/flstudio/) and, even though I never made a career out of it, I've always looked back fondly at those long afternoons. Even as I was studying to become a designer, and especially after I've started working as one—at a time when I forgot what it meant to have free time.
I am, by no means, a musician. But I grew up surrounded by them: my father and older brother, who are both multiinstrumentalists, and the several musicians they've played with throughout their life. So, growing up, I had a pretty big incentive to pick up a guitar and dedicate part of my life to it. For some reason though, I never did. It seemed as though, for any sort of activity to pique my interest, it had to somehow be connected to a computer. So when a friend of mine introduced me to electronic music back in high school, something clicked. All throughout my teenage years, I spent most of my free time experimenting with [Fruity Loops](https://www.image-line.com/flstudio/) and, even though I never made a career out of it, I've always looked back fondly at those long afternoons. Even as I was studying to become a designer, and especially after I've started working as one—at a time when I forgot what it meant to have free time.

> It was not until I turned thirty that I decided I wanted to have afternoons like those again.
To be immersed in my own world, headphones on, time flying out the window. So I set up a small studio in my home office and restarted making music. I'm still rusty and trying to get the hang of it again (switching to [Ableton Live](https://www.ableton.com/en/live/) meant I had to re-learn a lot of things) but I forced myself to send something out into the world before I turned 31. So on October 30th 2017 I released a small EP, under the name BORE. I called it 30. It's an homage to turning thirty and being scared shitless but still feeling insanely grateful and happy to be alive.
To be immersed in my own world, headphones on, time flying out the window. So I set up a small studio in my home office and restarted making music. I'm still rusty and trying to get the hang of it again (switching to [Ableton Live](https://www.ableton.com/en/live/) meant I had to relearn a lot of things) but I forced myself to send something out into the world before I turned 31. So on October 30th 2017 I released a small EP, under the name BORE. I called it 30. It's an homage to turning thirty and being scared shitless but still feeling insanely grateful and happy to be alive.

<iframe style="border: 0; width: 350px; height: 588px;" src="https://bandcamp.com/EmbeddedPlayer/album=1143290857/size=large/bgcol=ffffff/linkcol=1A1A1A/transparent=true/" seamless><a href="https://bore.bandcamp.com/album/30">30 by BORE</a></iframe>

Expand Down Expand Up @@ -46,8 +46,8 @@ I don't have the time—nor, more importantly and tragically, the skill—to tur

The title track is a longer, perkier track than the stuff I'm usually into. It's my attempt at making a danceable track for people blessed with two left feet. 🕺

The second track gets its title from the portuguese word for Vinegar and was heavily inspired by a long-time favorite poem of mine: [Portugal](http://ensina.rtp.pt/artigo/portugal-de-jorge-sousa-braga/), by Jorge de Sousa Braga.
The second track gets its title from the portuguese word for Vinegar and was heavily inspired by a longtime favorite poem of mine: [Portugal](http://ensina.rtp.pt/artigo/portugal-de-jorge-sousa-braga/), by Jorge de Sousa Braga.

In 2019, I unfortunately couldn't find any time to keep the momentum going. And though a global lock-down sounds like the perfect excuse to put more hours into your sideprojects, by 2020 I was a newly-minted father and was (am? 🤔) still trying to get the hang of it. So nothing new for now. But one can dream...
In 2019, I unfortunately couldn't find any time to keep the momentum going. And though a global lockdown sounds like the perfect excuse to put more hours into your sideprojects, by 2020 I was a newlyminted father and was (am? 🤔) still trying to get the hang of it. So nothing new for now. But one can dream...

</article>
14 changes: 7 additions & 7 deletions src/pages/projects/citizensforeurope/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ order: 9

<article role="article">

Citizens for Europe is a platform for European-based citizens and civil society organisations to share ideas and engage one another in helping shape democracy in an increasingly estranged Europe. Made up of just under 300 NGOs, the platform needed a new visual identity and website that allowed it to not only increase its social outreach, but also actively promote communication between its existing members. When they approached me asking for help, I was regularly collaborating with [FBA.](http://www.fba.pt/), so I worked together with them in bringing the brand and Website to life.
Citizens for Europe is a platform for Europeanbased citizens and civil society organisations to share ideas and engage one another in helping shape democracy in an increasingly estranged Europe. Made up of just under 300 NGOs, the platform needed a new visual identity and website that allowed it to not only increase its social outreach, but also actively promote communication between its existing members. When they approached me asking for help, I was regularly collaborating with [FBA.](http://www.fba.pt/), so I worked together with them in bringing the brand and Website to life.

</article>

![T-shirt featuring the Citizens for Europe Logo](images/tshirt@2x.png)
![Tshirt featuring the Citizens for Europe Logo](images/tshirt@2x.png)

<article role="article">

Expand All @@ -28,7 +28,7 @@ The idea for the logo popped up soon after I saw the first sentence in the brief
I highlighted the words citizens, together and Europe, and went looking for things that could broadly convey those concepts. Europe was quite obvious: one of the stars in the European flag. It was actually almost too obvious, and we debated whether we should resort to that kind of cliché or try to find something a bit more nuanced. In the end, though, we stuck to it, because it pieced together nicely with the other elements: fingerprints woven together, representing both citizenship and unity.

I'll admit it sounds a bit far-stretched when you try to explain the concept. And the first few sketches I came up with didn't exactly help the cause, as they looked either forced or boring. But right as I was about to give up, things seemed to fall into place. I had a logo I was actually quite happy with, and that I felt managed to combine all three concepts into a single image.
I'll admit it sounds a bit of a stretch when you try to explain the concept. And the first few sketches I came up with didn't exactly help the cause, as they looked either forced or boring. But right as I was about to give up, things seemed to fall into place. I had a logo I was actually quite happy with, and that I felt managed to combine all three concepts into a single image.

</article>

Expand All @@ -40,14 +40,14 @@ The original proposal had an additional detail we ended up having to drop. At th

> If you simply replace the words Citizens and Europe, you can use the logo as a vessel for any personal or political message you want to broadcast.
To allow for the brand not to get lost in the process, the word "for" was styled differently in the original logo, so that even when you take away the star and replace two-thirds of the name, the brand is still recognizable.
To allow for the brand not to get lost in the process, the word "for" was styled differently in the original logo, so that even when you take away the star and replace twothirds of the name, the brand is still recognizable.

</article>

<iframe class="video" src="https://player.vimeo.com/video/261192178?autoplay=1&loop=1&title=0&byline=0&portrait=0" width="4800" height="2700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

![Different possible combinations for the logo](images/logo_roulette@2x.png)
![Girl wearing a t-shirt that reads "Fiona for Peace"](images/fiona@2x.png)
![Girl wearing a tshirt that reads "Fiona for Peace"](images/fiona@2x.png)
![Cards with handwritten messages that read "Amber for Love" and "Dylan for Mom"](images/personal_cards@2x.png)
![Buttons featuring words and flags for European countries](images/buttons@2x.png)

Expand All @@ -69,7 +69,7 @@ What we did keep was Mário Feliciano's stellar [Grotzec Condensed](http://www.f

Finally, we designed and developed a Website that serves as the main hub of communication between the various members of the community. The biggest challenge here was turning what is basically a regular WordPress site into a social network of sorts. Organisations should be able to create and maintain their own public profile, as well as submit events, resources and proposals for other members to read and comment on. Under the hood, organisations should also be able to exchange messages between each other directly through the platform, and hopefully forge new partnerships that help shorten the distances between EU member states.

To do all of that, we got designer & developer [João Saraiva](https://concealed.pt/) to help us turn a static template into a full-fledged WordPress theme, complete with custom sign up flows and its own content management system for organisations to be able to submit and manage their own content on the Website. Thanks to his work, we managed to build a powerful multi-user application on top of what is essentially a blogging platform.
To do all of that, we got designer & developer [João Saraiva](https://concealed.pt/) to help us turn a static template into a fullfledged WordPress theme, complete with custom sign up flows and its own content management system for organisations to be able to submit and manage their own content on the Website. Thanks to his work, we managed to build a powerful multiuser application on top of what is essentially a blogging platform.

</article>

Expand All @@ -80,6 +80,6 @@ To do all of that, we got designer & developer [João Saraiva](https://concealed

> For a Website originally launched in early 2015, I think it has aged quite well.
It's still actively used by Citizens for Europe's now [more than 400 members](http://www.citizensforeurope.eu/organisations/), and new content is published on a daily basis. The site's main goals are also still as relevant as ever—if not more—and will continue to be in a post-Brexit world, so it's comforting to see CFE are still actively trying to build a better European Union.
It's still actively used by Citizens for Europe's now [more than 400 members](http://www.citizensforeurope.eu/organisations/), and new content is published on a daily basis. The site's main goals are also still as relevant as ever—if not more—and will continue to be in a postBrexit world, so it's comforting to see CFE are still actively trying to build a better European Union.

</article>
6 changes: 3 additions & 3 deletions src/pages/projects/echo1/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ order: 5

<article role="article">

Echo1 is a Singapore-based company working towards improving sound culture across the globe. They manage and fund businesses working in sound-related areas, while at the same time promoting good business practices within the companies they are involved in. Together with the folks at [Odd Camp](https://www.odd.camp/), I helped build their brand and website in record-time, going from a humble pitch deck to release in a few weeks.
Echo1 is a Singaporebased company working towards improving sound culture across the globe. They manage and fund businesses working in soundrelated areas, while at the same time promoting good business practices within the companies they are involved in. Together with the folks at [Odd Camp](https://www.odd.camp/), I helped build their brand and website in record-time, going from a humble pitch deck to release in a few weeks.

</article>

Expand All @@ -41,13 +41,13 @@ We were brought on to the project at a very early stage of the company's incepti

Our solution was to come up with a brand system that relied heavily on basic shapes, with a single line running through all of them—keeping everything connected, even if it means following the least obvious of paths. These were paired with a set of warm gradients and snappy animations, which we employed exhaustively [throughout the website](https://www.echo1.co) and the brand applications, creating a tight and easily recognisable brand that can evolve gracefully over time, as the products and companies Echo1 invests on begin to shape the company's values more clearly.

These shapes and colours are complemented by [a quirky sans-serif font](https://www.hvdfonts.com/fonts/niveau-grotesk) for headings and [a sobering serif](https://typekit.com/fonts/warnock) for body copy.
These shapes and colours are complemented by [a quirky sansserif font](https://www.hvdfonts.com/fonts/niveau-grotesk) for headings and [a sobering serif](https://typekit.com/fonts/warnock) for body copy.

</article>

![Several slides from the brand proposal presentation we did](images/proposal@2x.png)
![Detail of the website showcasing the company's practices](images/practices@2x.png)
![Photo of a monitor showing artboards with work-in-progress](images/monitor@2x.png)
![Photo of a monitor showing artboards with work‑in‑progress](images/monitor@2x.png)
![Screenshots of all pages on Echo1.co](images/pages@2x.png)
![Detail of a graph detailing how Echo1's accelerator program works](images/how-it-works@2x.png)
![Contact page on echo1.co, as seen on a laptop](images/contact-page@2x.png)
Expand Down
Loading

0 comments on commit 119bfbd

Please sign in to comment.