Conversão de px para em!!! Ex. 8 Aula 1 HTML e CSS II

PRIMEIRO CASO:

.titulo-principal {
    font-size: 60px;
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 25px;
    border-bottom: 10px solid #000;
}

convertido para:

.titulo-principal {
    font-size: 300%;
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 2rem;
    border-bottom: .5rem solid #000;
}

Nesse caso nao entendi como chegou aos 300% e consequentemente a padding 2rem / border-bottom 5 rem

SEGUNDO CASO:

.citacao-bio {
    background-color: #D9E5E3;
    border: 10px solid #C2CCCA;
    padding: 20px;
    margin: 20px 40px;
    width: 250px;
    box-sizing: border-box;
}

convertido para:

.citacao-bio {
    background-color: #D9E5E3;
    border: .5em solid #C2CCCA;
    padding: 1em;
    margin: 1em 2em;
    width: 30ch;
    box-sizing: border-box;
}

TERCEIRO CASO:

.leia-mais {
    padding: 8px;
    margin: 16px;
    display: block;
    font-size: 24px;
    text-align: center;
    background-color: #E6E7E8;
}

convertido para:

 .leia-mais {
    padding: .5em;
    margin: 1em;
    display: block;
    font-size: 1.25em;
    text-align: center;
    background-color: #E6E7E8;
}

No segundo caso temos que 1 em = 20 px no terceiro caso 1 em = 16 px, nao entendi o porque dessa diferença, onde está determinado esse valor, e como descobrir os px que usso para converter.

Outra duvida e porque o font-size do terceiro caso foi para 1.25 em sendo que se 1 em = 16 px nesse caso o font size seria 1,5 em

Desculpe o poste extenso mas estou com muitas duvidas nessas conversoes e usos dessas novas medidas e espero ter conseguido expressar minhas duvidas de maneira de facil entendimento.

Obrigado!!!