A propriedade innerText ao ler o conteúdo de um elemento irá retorná-lo como ele aparece na tela. Se o texto estiver oculto por estilização com CSS (por exemplo: display: none;) ele não será incluído. Ou seja, deve ser usada quando a estilização deve ser levada em consideração.

Já a propriedade textContent irá ler o texto como ele está escrito na marcação, não levando em consideração a estilização. Ela retorna todo o texto, independentemente dele estar sendo renderizado na tela ou não.

O trecho de código abaixo (que eu peguei de uma resposta no Stack Overflow) pode demonstrar a diferença:

<span>Hello <span style="display: none;">World</span></span>

Aqui innerText irá retornar 'Hello ', enquanto que textContent irá retornar 'Hello World'.

Comprovei no devtools

<header class="app__header">
            <span>Hello 
                <span style="display: none;">World</span>
                <div>Mais texto</div>
            </span>
            <figure class="app__logo-figure">
                <img class="app__logo-image" src="/imagens/logo.png" alt="">
            </figure>
        </header>       

Teste no devtools:

const elemento = document.querySelector('.app__header span'); undefined

console.log(elemento.innerText) VM11788:1 Hello Mais texto undefined

console.log(elemento.textContent) VM11798:1 Hello World Mais texto

Ótimo! Legal você ter testado! Acho que agora não ficou mais nenhuma dúvida, certo?